/* ═══════════════════════════════════════════════════════════
   Abdulrahman S. Al-Batati — Robotics portfolio (v3, light)
   Palette: warm white + snow + warm dark green. Display: Fraunces.
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,900&family=Inter:wght@300;400;500;600;700&family=Tajawal:wght@400;500;700;800&display=swap');

:root {
  --snow: #fbfaf6;        /* snowy white (page) */
  --paper: #f2ece1;       /* warm white (alt sections) */
  --paper-2: #eae2d4;
  --green-0: #16352a;     /* warm dark green — primary ink */
  --green-1: #21503d;     /* deep green */
  --green-2: #2f6b4f;     /* mid green accent */
  --green-3: #4d8a6a;     /* light green */
  --gold: #b6803a;        /* warm gold accent */
  --slate: #4a6b7c;       /* cool counterpoint — the research/paper accent */
  --ink: #16352a;
  --mid: #5c6f63;         /* muted green-gray text */
  --dim: #8a978c;
  --line: rgba(22,53,42,0.14);
  --card: #ffffff;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --disp: 'Fraunces', serif;
  --body: 'Inter', sans-serif;
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { font-family: var(--body); background: var(--snow); color: var(--ink); line-height: 1.7; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--green-2); outline-offset: 3px; border-radius: 4px; }
h1,h2,h3,h4 { font-family: var(--disp); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; }
::selection { background: var(--green-2); color: #fff; }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--green-3); border-radius: 99px; }

/* cursor */
#cursorDot, #cursorRing { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9500; display: none; }
.hasCursor #cursorDot, .hasCursor #cursorRing { display: block; }
.hasCursor, .hasCursor a, .hasCursor button { cursor: none; }
#cursorDot { width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--green-2); }
#cursorRing { width: 32px; height: 32px; margin: -16px; border: 1.4px solid var(--green-2); border-radius: 50%; opacity: 0.55; transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), opacity .3s; }
#cursorRing.on { width: 56px; height: 56px; margin: -28px; opacity: 1; }

/* loader */
#loader { position: fixed; inset: 0; z-index: 9999; background: var(--snow); display: grid; place-items: center; }
#loader .mk { display: grid; place-items: center; }
#loader .mk img { display: block; margin: 0 auto; }
#loader .mk::after { content: ''; display: block; height: 2px; width: 0; background: var(--green-2); margin-top: 12px; animation: load 1.2s var(--ease) infinite; }
@keyframes load { 0%{width:0} 60%{width:100%} 100%{width:100%;opacity:0} }

/* navbar */
.navbar { position: fixed; top: 0; inset-inline: 0; z-index: 1000; height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(1rem,4vw,2.6rem); transition: background .5s, box-shadow .5s; }
.navbar.scrolled { background: color-mix(in srgb, var(--snow) 88%, transparent); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.brand { font-family: var(--disp); font-weight: 600; font-size: 1.25rem; color: var(--green-0); }
.brand span { color: var(--green-3); font-style: italic; }
.nav-menu { display: flex; align-items: center; gap: 1.6rem; }
.nav-links { display: flex; gap: 1.4rem; list-style: none; }
.nav-links a { font-size: .92rem; color: var(--mid); position: relative; padding: 6px 2px; transition: color .3s; cursor: pointer; }
.nav-links a:hover, .nav-links a.active { color: var(--green-0); }
.nav-links a::after { content:''; position: absolute; bottom: 0; inset-inline: 0; height: 1.5px; background: var(--green-2); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.lang-toggle { width: 38px; height: 38px; border-radius: 50%; border: 1.4px solid var(--green-2); color: var(--green-1); font-weight: 700; font-size: .9rem; display: grid; place-items: center; transition: background .35s var(--ease), color .35s; }
.lang-toggle:hover { background: var(--green-2); color: #fff; }
.nav-cta { border: 1.4px solid var(--green-2); color: var(--green-1); border-radius: 99px; padding: 8px 18px; font-size: .85rem; font-weight: 600; transition: background .35s var(--ease), color .35s; }
.nav-cta:hover { background: var(--green-2); color: #fff; }
.hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.hamburger span { width: 24px; height: 2px; background: var(--green-0); transition: .35s var(--ease); }
.hamburger.active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity: 0; }
.hamburger.active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* pages (router) */
.page { display: none; }
.page.active { display: block; }

/* ── block-curtain page transition (2×5) + drone flyby ── */
.transition { position: fixed; inset: 0; display: none; flex-direction: column; z-index: 9200; pointer-events: none; }
.transition-row { flex: 1; display: flex; }
.transition-row.row-1 .block { transform-origin: top; }
.transition-row.row-2 .block { transform-origin: bottom; }
.transition .block { flex: 1; background: var(--green-0); transform: scaleY(0); will-change: transform; visibility: hidden; box-shadow: 0 0 0 1px var(--green-0); }
.trans-drone { position: absolute; top: 44%; left: 0; width: clamp(96px, 12vw, 150px); opacity: 0; will-change: transform; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35)); }
.trans-drone svg { width: 100%; height: auto; }
.td-ink { fill: var(--paper); }
.td-arm { stroke: var(--paper); stroke-width: 3.2; fill: none; stroke-linecap: round; }
.td-prop { fill: color-mix(in srgb, var(--paper) 55%, transparent); }
.td-gold { fill: var(--gold); }

/* ════ HERO — static generated illustration ════ */
.hero-static { position: relative; height: 100svh; min-height: 580px; overflow: hidden; background: var(--paper); }
.hero-art { position: absolute; inset: 0; }
.hero-art img { position: absolute; inset: 0; width: 100%; height: 105%; object-fit: cover; object-position: center top; }
.hero-vid { position: absolute; inset: 0; width: 100%; height: 105%; object-fit: cover; object-position: center top; }
.hero-static::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(251,250,246,0.08) 0%, transparent 34%, rgba(22,53,42,0.55) 100%); pointer-events: none; }
.hero-overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 clamp(1.1rem,5vw,4rem) clamp(2rem,6vw,4.5rem); pointer-events: none; }
.hero-overlay .inner { max-width: 1100px; pointer-events: auto; }
.hero-kicker { display: inline-flex; align-items: center; gap: 9px; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: color-mix(in srgb, var(--green-0) 55%, transparent); backdrop-filter: blur(6px); padding: 6px 14px; border-radius: 99px; margin-bottom: 1.2rem; }
.hero-title { font-family: var(--disp); font-size: clamp(2.4rem, 7vw, 6rem); font-weight: 500; color: #fff; text-shadow: 0 2px 40px rgba(0,0,0,0.4); }
.line-mask { overflow: hidden; }
.hero-title .line.accent { font-style: italic; color: #ffe9c2; }
.hero-sub { margin-top: 1.3rem; max-width: 600px; font-size: clamp(1rem,1.7vw,1.18rem); color: #f0ece2; text-shadow: 0 2px 20px rgba(0,0,0,0.5); }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.8rem; }
.btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 28px; border-radius: 99px; font-weight: 600; font-size: .96rem; transition: transform .4s var(--ease), background .4s, color .4s; }
.btn-primary { background: #fff; color: var(--green-0); }
.btn-primary:hover { background: #ffe9c2; }
.btn-ghost { border: 1.4px solid rgba(255,255,255,0.6); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,0.14); }

/* stats band */
.stats-band { background: var(--green-0); color: var(--snow); padding: clamp(2rem,5vw,3.2rem) clamp(1.1rem,5vw,4rem); }
#stats { display: flex; flex-wrap: wrap; gap: clamp(1.5rem,6vw,5rem); max-width: 1100px; margin: 0 auto; }
.stat { display: flex; flex-direction: column; }
.stat-n { font-family: var(--disp); font-weight: 500; font-size: clamp(1.9rem,4vw,3rem); line-height: 1; color: #fff; }
.stat-l { font-size: .82rem; color: #a9c4b5; margin-top: 6px; }

/* section chrome */
.section { padding: clamp(4.5rem,10vw,8rem) clamp(1.1rem,5vw,4rem); position: relative; max-width: 1320px; margin: 0 auto; }
.alt { background: var(--paper); max-width: none; }
.alt .section-inner { max-width: 1320px; margin: 0 auto; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--green-3); margin-bottom: 1rem; }
.eyebrow::before { content: ''; width: 22px; height: 1.5px; background: var(--green-3); }
.section-title { font-family: var(--disp); font-size: clamp(2rem,5.5vw,3.6rem); font-weight: 500; max-width: 20ch; color: var(--green-0); }
.section-title em { font-style: italic; color: var(--green-2); }
.section-lead { margin-top: 1rem; max-width: 60ch; color: var(--mid); font-size: clamp(1rem,1.7vw,1.15rem); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 2px rgba(22,53,42,0.04); }

/* about */
.about-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; margin-top: 3rem; }
.about-portrait { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4/5; box-shadow: 0 30px 60px rgba(22,53,42,0.14); }
.about-portrait img { width: 100%; height: 100%; object-fit: cover; }
.about-body p { font-size: clamp(1.05rem,1.9vw,1.3rem); margin-bottom: 1.1rem; color: var(--green-0); }
.about-body .origin { font-family: var(--disp); font-style: italic; color: var(--green-2); font-size: 1.3rem; }
.about-meta-line { color: var(--mid); font-size: 1rem; }
.about-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.4rem; }
.chip { border: 1px solid var(--line); border-radius: 99px; padding: 6px 14px; font-size: .82rem; color: var(--mid); background: var(--snow); }

/* research timeline (P7) */
.tl-wrap { position: relative; margin-top: 3rem; }
.tl-svg { position: absolute; left: 50%; top: 0; transform: translateX(-50%); height: 100%; width: 60px; z-index: 0; pointer-events: none; }
#tlPath { fill: none; stroke: var(--green-3); stroke-width: 2.5; }
.tl-item { position: relative; width: 50%; padding: 0 0 2.6rem 0; z-index: 1; }
.tl-item:not(.right) { padding-right: 3.2rem; text-align: right; }
.tl-item.right { margin-left: 50%; padding-left: 3.2rem; }
.tl-dot { position: absolute; top: 20px; width: 13px; height: 13px; border-radius: 50%; background: var(--green-2); box-shadow: 0 0 0 5px rgba(47,107,79,0.15); }
.tl-item:not(.right) .tl-dot { right: -6.5px; }
.tl-item.right .tl-dot { left: -6.5px; }
.tl-card { padding: 1.3rem 1.5rem; transition: transform .4s var(--ease), box-shadow .4s; }
.tl-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(22,53,42,0.1); }
.tl-year { font-family: var(--disp); font-weight: 600; color: var(--green-2); font-size: .92rem; }
.tl-tag { display: inline-block; margin-inline-start: 10px; font-size: .72rem; color: var(--mid); border: 1px solid var(--line); border-radius: 99px; padding: 2px 10px; }
.tl-card h3 { font-size: 1.1rem; margin: .5rem 0; color: var(--green-0); font-weight: 600; }
.tl-venue { color: var(--mid); font-size: .9rem; }
.tl-doi { display: inline-block; margin-top: .6rem; color: var(--green-2); font-size: .85rem; font-weight: 600; }
.research-note { margin-top: 1.4rem; text-align: center; color: var(--dim); font-size: .92rem; max-width: 70ch; margin-inline: auto; }

/* ════ publications database (ros_database style) ════ */
.pubdb { margin-top: 2.5rem; }
.taxo-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.4rem; }
.taxo { border: 1.4px solid var(--line); background: var(--snow); color: var(--mid); border-radius: 99px; padding: 7px 16px; font-size: .85rem; font-weight: 500; transition: all .3s var(--ease); }
.taxo:hover { border-color: var(--green-3); color: var(--green-1); }
.taxo.on { background: var(--green-2); color: #fff; border-color: var(--green-2); }
.pubdb-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 1rem; }
.pubdb-search { flex: 1 1 240px; min-width: 200px; border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; background: var(--snow); font-size: .95rem; }
.pubdb-search:focus { outline: none; border-color: var(--green-3); }
.pubdb-sel { border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; background: var(--snow); font-size: .9rem; color: var(--mid); }
.pubdb-count { color: var(--dim); font-size: .85rem; margin-inline-start: auto; }
.pub-table { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 1060px; }
.pub-table col.c-paper { width: 42%; } .pub-table col.c-contrib { width: 12%; } .pub-table col.c-type { width: 8%; }
.pub-table col.c-status { width: 11%; } .pub-table col.c-rank { width: 9%; } .pub-table col.c-year { width: 6%; }
.pub-table col.c-doi { width: 6%; } .pub-table col.c-proj { width: 6%; }
.pub-table thead th { text-align: left; font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); padding: 10px 12px; border-bottom: 2px solid var(--line); cursor: pointer; user-select: none; white-space: nowrap; }
.pub-table thead th:hover { color: var(--green-2); }
.pub-row { border-bottom: 1px solid var(--line); cursor: pointer; transition: background .2s; }
.pub-row:hover { background: var(--paper); }
.pub-row td { padding: 14px 9px; vertical-align: top; font-size: .92rem; }
.pub-title { font-weight: 600; color: var(--green-0); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pub-venue { color: var(--mid); font-size: .85rem; margin-top: 3px; }
.pub-badge { display: inline-block; font-size: .72rem; padding: 2px 9px; border-radius: 99px; background: var(--paper-2); color: var(--green-1); white-space: nowrap; }
.pub-badge.tx { background: color-mix(in srgb, var(--green-3) 22%, transparent); color: var(--green-1); }
.pub-badge.st-published { background: #d7e9dd; color: #1c5238; }
.pub-badge.st-accepted { background: #e7e2cf; color: #7a5a1e; }
.pub-badge.st-review { background: #e9e1e1; color: #7a4a4a; }
.pub-doi { color: var(--green-2); font-weight: 600; white-space: nowrap; }
.pub-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.pub-tags span { font-size: .7rem; color: var(--mid); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; }
.pub-abstract { background: var(--paper); }
.pub-abstract td { padding: 0 12px; }
.pub-abstract .inner { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease), padding .4s var(--ease); padding: 0 4px; color: var(--mid); font-size: .9rem; }
.pub-abstract.open .inner { max-height: 600px; padding: 14px 4px; }
.pub-table-wrap { overflow-x: auto; }
.st-progress { background: #e6e3da; color: #5c5340; }
.pub-rank { font-weight: 600; color: var(--green-1); font-size: .85rem; white-space: nowrap; }
.pub-area { background: color-mix(in srgb, var(--green-3) 22%, transparent) !important; color: var(--green-1) !important; font-weight: 600; border: 0 !important; }
.pub-links { white-space: nowrap; }
.pub-proj { color: var(--gold); font-weight: 600; }
.pub-contrib { display: inline-block; font-size: .76rem; font-weight: 600; border-radius: 7px; padding: 3px 10px; line-height: 1.3; }
.pub-contrib.c-first { background: var(--green-0); color: var(--snow); }
.pub-contrib.c-equal { background: color-mix(in srgb, var(--gold) 22%, transparent); color: #8a5e22; }
.pub-contrib.c-co { background: var(--paper-2); color: var(--green-1); }
.pub-bibtex-btn { margin-top: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 14px; font-size: .82rem; color: var(--green-1); background: var(--snow); }
.pub-bibtex-btn:hover { border-color: var(--green-3); }
.pub-bibtex { margin-top: 10px; background: var(--green-0); color: #dce8e0; border-radius: 10px; padding: 14px; font-size: .76rem; line-height: 1.5; overflow-x: auto; white-space: pre; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
@media (max-width: 760px) { .pub-hide-sm { display: none; } }

/* articles (Medium-style) */
.articles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px,100%),1fr)); gap: 1.6rem; margin-top: 2.5rem; }
.article-card { display: block; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card); transition: transform .4s var(--ease), box-shadow .4s; }
.article-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(22,53,42,0.1); }
.article-cover { aspect-ratio: 16/9; width: 100%; object-fit: cover; background: var(--paper-2); }
.article-body { padding: 1.4rem 1.5rem 1.6rem; }
.article-meta { display: flex; gap: 10px; align-items: center; font-size: .78rem; color: var(--dim); margin-bottom: .6rem; }
.article-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--dim); }
.article-card h3 { font-family: var(--disp); font-size: 1.3rem; font-weight: 600; color: var(--green-0); line-height: 1.2; }
.article-card p { color: var(--mid); font-size: .95rem; margin-top: .6rem; }
.article-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1rem; }
.article-tags span { font-size: .72rem; color: var(--green-2); background: var(--paper); border-radius: 6px; padding: 2px 9px; }
.articles-empty { margin-top: 2.5rem; padding: 2.5rem; text-align: center; border: 1px dashed var(--line); border-radius: 16px; color: var(--mid); }
.article-read { position: relative; }
.article-full { max-width: 760px; margin: 0 auto; }
.article-full h1 { font-family: var(--disp); font-size: clamp(2rem,5vw,3rem); font-weight: 600; color: var(--green-0); margin-bottom: 1rem; }
.article-full .a-meta { color: var(--dim); font-size: .9rem; margin-bottom: 2rem; }
.article-full .a-content p { font-size: 1.12rem; line-height: 1.85; color: var(--green-0); margin-bottom: 1.3rem; }
.article-full .a-content h2 { font-family: var(--disp); font-size: 1.6rem; margin: 2rem 0 1rem; color: var(--green-1); }
.a-back { display: inline-flex; align-items: center; gap: 7px; color: var(--green-2); font-weight: 600; margin-bottom: 2rem; cursor: pointer; }

/* brand logo lockup */
.brand { display: inline-flex; align-items: center; }
.brand-logo { height: 36px; width: auto; display: block; transition: opacity .3s var(--ease); }
.brand:hover .brand-logo { opacity: .78; }
@media (max-width: 600px) { .brand-logo { height: 30px; } }

/* ════ robotics architecture (closed-loop schematic) ════ */
.arch-figure { margin-top: 2.6rem; overflow-x: auto; padding-bottom: 6px; direction: ltr; }
.arch-svg { width: 100%; min-width: 720px; height: auto; display: block; }
/* timing bands */
.arch-band { stroke: rgba(22,53,42,0.05); stroke-width: 1; }
.arch-band.reflex { fill: rgba(182,128,58,0.055); }
.arch-band.react  { fill: rgba(47,107,79,0.045); }
.arch-band.delib  { fill: rgba(77,138,106,0.05); }
.arch-time { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; }
.arch-time b { font-family: var(--body); font-size: 8.5px; font-weight: 700; color: var(--green-1); line-height: 1.1; }
.arch-time span { font-size: 7.2px; color: var(--dim); line-height: 1.1; }
.arch-coltitle { font-family: var(--disp); font-size: 14px; font-weight: 600; fill: var(--green-2); text-anchor: middle; }
.arch-edgelabel { font-family: var(--body); font-size: 9px; fill: var(--dim); text-anchor: middle; }
.arch-edgelabel.emerg { fill: var(--gold); font-weight: 600; }
/* nodes (foreignObject) */
.arch-node { box-sizing: border-box; position: relative; height: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 5px 10px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; text-align: start; }
.arch-node.perc { background: #eef4f0; }
.arch-node.cog { background: #f7f3ec; }
.arch-node.center { background: var(--green-0); border-color: var(--green-0); }
.arch-node.super { background: #f1ece2; border-style: dashed; border-color: var(--green-3); }
.arch-node.hw { background: var(--paper-2); }
.arch-node.mine { border-color: var(--green-2); border-width: 1.6px; box-shadow: 0 2px 10px rgba(22,53,42,0.06); }
.arch-n-label { font-family: var(--disp); font-weight: 600; font-size: 12.5px; line-height: 1.1; color: var(--green-0); display: block; }
.arch-n-sub { font-size: 9.5px; line-height: 1.14; color: var(--mid); margin-top: 2px; display: block; }
[dir="rtl"] .arch-n-sub { font-size: 9px; }
.arch-node.center .arch-n-label { color: var(--snow); }
.arch-node.center .arch-n-sub { color: #b9d0c3; }
.arch-dot { position: absolute; top: 6px; inset-inline-end: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--green-2); }
/* connectors */
.arch-flow { stroke: var(--green-1); stroke-width: 2.2; marker-end: url(#ar-flow); }
.arch-share { stroke: var(--green-3); stroke-width: 1.6; marker-start: url(#ar-share); marker-end: url(#ar-share); }
.arch-react { stroke: var(--dim); stroke-width: 1.6; stroke-dasharray: 5 4; marker-end: url(#ar-react); }
.arch-emerg { stroke: var(--gold); stroke-width: 2.6; stroke-dasharray: 7 4; marker-end: url(#ar-emerg); }
.arch-super { stroke: var(--green-2); stroke-width: 1.4; stroke-dasharray: 3 4; marker-start: url(#ar-sup); marker-end: url(#ar-sup); opacity: .8; }
.m-flow { fill: var(--green-1); } .m-share { fill: var(--green-3); } .m-react { fill: var(--dim); } .m-emerg { fill: var(--gold); } .m-sup { fill: var(--green-2); }
/* legend */
.arch-legend { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 1.2rem; font-size: .8rem; color: var(--mid); justify-content: center; }
.arch-legend span { display: inline-flex; align-items: center; gap: 7px; }
.arch-legend i { width: 22px; border-top: 2.4px solid var(--green-1); display: inline-block; }
.le-share i { border-top: 1.8px solid var(--green-3); }
.le-react i { border-top: 1.8px dashed var(--dim); }
.le-emerg i { border-top: 2.6px dashed var(--gold); }
.le-mine i { width: 12px; height: 12px; border: 1.6px solid var(--green-2); border-radius: 50%; }
/* sim footnote + work cards */
.arch-sim { margin: 1.5rem auto 0; max-width: 760px; text-align: center; font-size: .9rem; color: var(--mid); font-style: italic; }
.arch-work-h { margin-top: 2.8rem; font-size: 1.3rem; color: var(--green-0); text-align: center; }
.arch-cards { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px; }
.arch-card { border: 1px solid var(--line); border-inline-start: 3px solid var(--green-2); border-radius: 12px; padding: 1rem 1.1rem; background: var(--card); transition: box-shadow .35s var(--ease), transform .35s var(--ease); }
.arch-card:hover { box-shadow: 0 14px 36px rgba(22,53,42,0.09); transform: translateY(-2px); }
.arch-card h4 { font-size: 1rem; color: var(--green-0); margin-bottom: 6px; }
.arch-card-work { font-size: .86rem; color: var(--mid); margin-bottom: 10px; line-height: 1.5; }
.arch-papers { display: flex; flex-wrap: wrap; gap: 6px; }
.arch-papers span { font-size: .72rem; border: 1px solid var(--line); border-radius: 7px; padding: 2px 9px; color: var(--green-1); background: var(--snow); }

/* projects sphere */
.gallery-dark { background: var(--green-0); border-radius: 0; max-width: none; }
.gallery-dark .eyebrow { color: #a9c4b5; } .gallery-dark .eyebrow::before { background: #a9c4b5; }
.gallery-dark .section-title { color: var(--snow); } .gallery-dark .section-title em { color: #ffe9c2; }
.gallery-dark .section-lead { color: #c2d5cb; }
#projects .section-inner { max-width: 1320px; margin: 0 auto; }
#sphereWrap { position: relative; height: min(80svh, 800px); margin-top: 2rem; }
#sphereCanvas { width: 100%; height: 100%; cursor: grab; touch-action: none; }
#sphereCanvas:active { cursor: grabbing; }
#sphereTag { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); background: rgba(251,250,246,0.92); color: var(--green-0); border-radius: 99px; padding: 9px 22px; font-size: .9rem; font-weight: 600; opacity: 0; translate: 0 8px; transition: opacity .35s var(--ease), translate .35s var(--ease); pointer-events: none; }
#sphereTag.on { opacity: 1; translate: 0 0; }
.sphere-hint { text-align: center; color: #a9c4b5; font-size: .88rem; margin-top: 1rem; }
#projFallback { display: none; }
#sphereWrap.fallback #sphereCanvas, #sphereWrap.fallback + .sphere-hint { display: none; }
#sphereWrap.fallback #projFallback { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 16px; }

/* galleries / grids */
.gal-h { font-family: var(--disp); font-size: 1.3rem; margin: 2.2rem 0 1.1rem; color: var(--green-1); font-weight: 600; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px,100%),1fr)); gap: 16px; }
.gItem { position: relative; border-radius: 13px; overflow: hidden; cursor: pointer; background: var(--paper); border: 1px solid var(--line); }
.gItem img { aspect-ratio: 4/3; object-fit: cover; width: 100%; transition: transform .7s var(--ease); }
.gItem:hover img { transform: scale(1.06); }
.gItem figcaption { position: absolute; inset-inline: 0; bottom: 0; padding: 14px; font-size: .85rem; color: #fff; background: linear-gradient(transparent, rgba(22,53,42,0.92)); opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.gItem:hover figcaption { opacity: 1; transform: translateY(0); }

/* hardware flow gallery — rows drift with scroll */
.flow-sec { max-width: none; overflow: hidden; }
.flow-sec > .reveal { max-width: 1320px; margin: 0 auto; }
.flow-wrap { display: flex; flex-direction: column; gap: 18px; margin-top: 1.6rem; }
/* Each row is its own scroll container (see wireFlow) — the old transform drift
   could not reach the last cards and could not be swiped at all. The lane holds the
   arrows and the edge fades that show there is more to the side. */
.flow-lane { position: relative; }
.flow-row { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 2px; cursor: grab; }
.flow-row::-webkit-scrollbar { display: none; }
.flow-row.dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.flow-row.dragging .flow-card { pointer-events: none; }
.flow-lane::before, .flow-lane::after { content: ""; position: absolute; top: 0; bottom: 0; width: 64px; pointer-events: none; z-index: 2; opacity: 1; transition: opacity .3s; }
.flow-lane::before { inset-inline-start: -1px; background: linear-gradient(to right, var(--paper), transparent); }
.flow-lane::after { inset-inline-end: -1px; background: linear-gradient(to left, var(--paper), transparent); }
[dir="rtl"] .flow-lane::before { background: linear-gradient(to left, var(--paper), transparent); }
[dir="rtl"] .flow-lane::after { background: linear-gradient(to right, var(--paper), transparent); }
.flow-lane.at-start::before, .flow-lane.at-end::after, .flow-lane.no-scroll::before, .flow-lane.no-scroll::after { opacity: 0; }
.flow-arrow { position: absolute; top: 50%; z-index: 3; translate: 0 -50%; width: 42px; height: 42px; border-radius: 50%; background: var(--card); border: 1px solid var(--line); color: var(--green-1); font-size: 1.3rem; line-height: 1; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(22,53,42,.14); transition: opacity .3s, transform .3s var(--ease), background .3s; }
.flow-arrow.prev { inset-inline-start: 6px; }
.flow-arrow.next { inset-inline-end: 6px; }
[dir="rtl"] .flow-arrow { transform: scaleX(-1); }
.flow-arrow:hover { background: var(--green-2); color: #fff; border-color: var(--green-2); }
.flow-lane.at-start .flow-arrow.prev, .flow-lane.at-end .flow-arrow.next, .flow-lane.no-scroll .flow-arrow { opacity: 0; pointer-events: none; }
.flow-card { scroll-snap-align: start; }
.flow-card { position: relative; flex: 0 0 auto; width: clamp(250px, 30vw, 390px); border-radius: 13px; overflow: hidden; cursor: pointer; background: var(--paper); border: 1px solid var(--line); }
.flow-card img { aspect-ratio: 4/3; object-fit: cover; width: 100%; transition: transform .7s var(--ease); display: block; }
.flow-card:hover img { transform: scale(1.05); }
.flow-card figcaption { position: absolute; inset-inline: 0; bottom: 0; padding: 12px; font-size: .82rem; color: #fff; background: linear-gradient(transparent, rgba(22,53,42,0.92)); opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.flow-card:hover figcaption { opacity: 1; transform: translateY(0); }

/* patents */
.patent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 2.5rem; }
.patent { display: grid; grid-template-columns: 130px 1fr; gap: 1.2rem; padding: 1.2rem; align-items: center; }
.patent img { border-radius: 10px; aspect-ratio: 3/4; object-fit: cover; }
.patent h3 { font-size: 1.1rem; margin: .3rem 0; color: var(--green-0); font-weight: 600; }
.patent p { color: var(--mid); font-size: .9rem; }

/* experience / education */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); margin-top: 3rem; }
.col h3 { font-family: var(--disp); font-size: 1.5rem; margin-bottom: 1.5rem; color: var(--green-0); font-weight: 600; }
.row { display: grid; grid-template-columns: 130px 1fr; gap: 1.2rem; padding: 1.3rem 0; border-top: 1px solid var(--line); }
.row-when { color: var(--green-2); font-size: .85rem; font-weight: 600; font-family: var(--disp); }
.row-body h4 { font-size: 1.05rem; color: var(--green-0); }
.row-org { color: var(--mid); font-size: .92rem; margin: 3px 0; }
.row-note { color: var(--dim); font-size: .88rem; }

/* skills + repos */
.skill-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1.2rem; margin-top: 3rem; }
.skill-group { padding: 1.5rem; }
.skill-group h4 { color: var(--green-2); font-family: var(--disp); font-size: 1.1rem; margin-bottom: 1.1rem; font-weight: 600; }
.chips-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.skill-group .chip { background: var(--paper); color: var(--green-1); border-color: transparent; font-weight: 500; }
.repo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px,100%),1fr)); gap: 1.2rem; margin-top: 2.5rem; }
.repo { padding: 1.4rem; transition: transform .4s var(--ease), box-shadow .4s; }
.repo:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(22,53,42,0.1); }
.repo-top { display: flex; justify-content: space-between; align-items: center; }
.repo-name { font-family: var(--disp); font-weight: 600; color: var(--green-0); }
.repo-star { color: var(--gold); font-size: .85rem; }
.repo p { color: var(--mid); font-size: .9rem; margin: .6rem 0 1rem; }
.repo-lang { font-size: .78rem; color: var(--mid); border: 1px solid var(--line); border-radius: 99px; padding: 3px 11px; }

/* ════ BEYOND CAREER page ════ */
.beyond-hero { position: relative; min-height: 88svh; display: flex; align-items: flex-end; overflow: hidden; padding: 120px clamp(1.1rem,5vw,4rem) 3.5rem; }
.beyond-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.beyond-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,53,42,0.2), rgba(22,53,42,0.78)); }
.beyond-hero .inner { position: relative; z-index: 2; max-width: 900px; }
.beyond-hero .section-title, .beyond-hero .hero-kicker { color: #fff; }
.beyond-hero .lead { color: #f0ece2; max-width: 56ch; margin-top: 1rem; font-size: 1.15rem; }
.cal-band { background: var(--green-0); color: var(--snow); }
.cal-band .section-title { color: #fff; } .cal-band .section-lead { color: #c2d5cb; }
.cal-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2rem; }
.cal-list span { border: 1px solid rgba(255,255,255,0.25); border-radius: 99px; padding: 9px 18px; font-size: .92rem; }

/* contact */
.contact { text-align: center; padding-bottom: 4rem; position: relative; overflow: hidden; }
.contact-bg { position: absolute; inset: 0; z-index: 0; }
.contact-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.18; }
.contact-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, rgba(251,250,246,0.4), var(--snow) 75%); }
.contact-inner { position: relative; z-index: 1; }
.contact h2 { font-family: var(--disp); font-size: clamp(2rem,6vw,4rem); font-weight: 500; margin: 1rem 0; color: var(--green-0); }
.contact h2 em { font-style: italic; color: var(--green-2); }
.contact-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2rem; }
.contact-links a { border: 1px solid var(--line); border-radius: 99px; padding: 12px 26px; color: var(--green-1); background: var(--snow); transition: all .35s; }
.contact-links a:hover { border-color: var(--green-2); color: var(--green-2); }
.footer { text-align: center; color: var(--dim); padding: 2.4rem; font-size: .85rem; border-top: 1px solid var(--line); }

/* ── admin entry marker ──
   A faint diamond at the end of the footer line: the owner knows to look at the
   end of the footer, a visitor reads it as punctuation. Hover or keyboard focus
   brings it up to the gold accent and slides out an "Admin" label. Deliberately
   no `title` attribute — a native browser tooltip would advertise it to anyone
   who happens to hover. The 2rem box keeps it a real tap target on phones. */
.admin-dot { position: relative; display: inline-grid; place-items: center; width: 2rem; height: 2rem; vertical-align: middle; color: inherit; opacity: .2; text-decoration: none; transition: opacity .3s var(--ease), color .3s var(--ease); }
.admin-dot i { font-style: normal; font-size: .62rem; line-height: 1; }
/* Label sits ABOVE the dot, not beside it: the dot butts straight up against the
   footer text, so a side-placed label lands on top of that text. Above is also
   direction-agnostic (no LTR/RTL special-casing) and uses the footer's padding. */
.admin-dot .admin-dot-label { position: absolute; bottom: calc(100% - 4px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
.admin-dot:hover, .admin-dot:focus-visible { opacity: 1; color: var(--gold); }
.admin-dot:hover .admin-dot-label, .admin-dot:focus-visible .admin-dot-label { opacity: .75; }
.admin-dot:focus-visible { outline: 1px dotted currentColor; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .admin-dot, .admin-dot .admin-dot-label { transition: none; } }

/* panels / lightbox */
.panel, .lightbox { position: fixed; inset: 0; z-index: 8000; background: rgba(22,53,42,0.55); backdrop-filter: blur(8px); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .45s var(--ease); }
.panel.active, .lightbox.active { opacity: 1; pointer-events: auto; }
.pp-inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; max-width: 1050px; width: 92vw; max-height: 84vh; background: var(--snow); border-radius: 16px; overflow: hidden; }
.pp-inner img { width: 100%; height: 100%; max-height: 84vh; object-fit: cover; }
.pp-text { align-self: center; padding: 2.4rem; }
.pp-kind { color: var(--green-3); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.pp-text h3 { font-family: var(--disp); font-size: clamp(1.6rem,4vw,2.4rem); margin: .5rem 0 1rem; color: var(--green-0); font-weight: 600; }
.pp-text p { color: var(--mid); font-size: 1.02rem; }
.pp-close, .lb-close { position: absolute; top: 22px; right: 26px; font-size: 1.6rem; padding: 10px; color: #fff; }
.lightbox img { max-width: min(92vw,1400px); max-height: 80vh; object-fit: contain; border-radius: 8px; }
.lb-nav { position: absolute; top: 50%; translate: 0 -50%; font-size: 2.6rem; padding: 16px; color: #fff; opacity: .8; }
.lb-prev { left: 16px; } .lb-next { right: 16px; }
.lb-meta { position: absolute; bottom: 26px; inset-inline: 0; text-align: center; color: #f0ece2; }
#lbCount { display: block; color: #c2d5cb; font-size: .82rem; margin-top: 4px; }

/* responsive */
@media (max-width: 900px) {
  .about-grid, .cols, .patent-grid, .pp-inner { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .nav-menu.active .nav-links { display: flex; position: fixed; top: 70px; inset-inline: 0; flex-direction: column; background: var(--snow); padding: 1.6rem 2rem; gap: 1.1rem; box-shadow: 0 20px 40px rgba(22,53,42,0.12); }
  .hamburger { display: flex; }
  .tl-svg { left: 16px; transform: none; }
  .tl-item { width: 100%; padding-left: 3rem !important; padding-right: 0 !important; text-align: left !important; margin-left: 0 !important; }
  .tl-item .tl-dot { left: 9px !important; right: auto !important; }
  .pp-inner img { max-height: 36vh; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .001s !important; transition-duration: .12s !important; }
  .hero-vid, .hub-vid { display: none; }
}

/* ════ interests gallery page ════ */
.gp-section { min-height: 82svh; }
.gp-head { text-align: center; }
.gp-head .eyebrow { justify-content: center; }
.gp-head .section-title { margin: 0 auto; }
.hub-stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(2rem,5vw,3.4rem) 0 3rem; min-height: 640px; }
.hub-emblem { position: relative; z-index: 2; width: min(430px, 76vw); aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 30px 80px rgba(22,53,42,0.22); transition: box-shadow .6s var(--ease); }
.hub-emblem img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hub-emblem:hover { box-shadow: 0 36px 90px rgba(22,53,42,0.3); }
.hub-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.hub-pulse { position: absolute; inset: -2px; border-radius: 50%; border: 2.5px solid var(--green-3); animation: hubpulse 2.6s var(--ease) infinite; pointer-events: none; }
@keyframes hubpulse { 0% { transform: scale(.98); opacity: .9; } 70% { transform: scale(1.08); opacity: 0; } 100% { opacity: 0; } }
.burst .hub-pulse { display: none; }
.hub-sub { margin-top: 1.4rem; color: var(--mid); font-size: .95rem; }
.hub-cats { position: absolute; inset: 0; display: none; place-items: center; pointer-events: none; z-index: 3; }
.burst .hub-cats { display: grid; }
.cat-card { position: absolute; left: 50%; top: 50%; margin: -66px 0 0 -94px; width: 188px; min-height: 132px; pointer-events: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 14px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 44px rgba(22,53,42,0.14); transform: translate(var(--tx,0), var(--ty,0)); transition: box-shadow .3s var(--ease), border-color .3s; cursor: pointer; }
.cat-card:hover { border-color: var(--green-2); box-shadow: 0 22px 54px rgba(22,53,42,0.22); }
.cc-icon { font-size: 1.5rem; color: var(--green-2); line-height: 1; }
.cat-card b { font-family: var(--disp); font-size: 1.02rem; color: var(--green-0); text-align: center; }
.cc-tease { font-size: .74rem; color: var(--mid); text-align: center; }
.gp-world { margin-top: 1.4rem; }
.gp-chipbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 2rem; }
.gp-back { border: 1.4px solid var(--green-2); border-radius: 99px; padding: 7px 16px; font-size: .85rem; color: var(--green-1); font-weight: 600; background: var(--snow); }
.gp-back:hover { background: var(--green-2); color: #fff; }
.gp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gp-chip { border: 1.3px solid var(--line); background: var(--snow); color: var(--mid); border-radius: 99px; padding: 7px 15px; font-size: .85rem; transition: all .25s var(--ease); }
.gp-chip.on { background: var(--green-2); color: #fff; border-color: var(--green-2); }
/* The world header carries the category's icon, enlarged — it is the landing point
   of the morph fired from the card (or chip) you clicked. */
.gp-view-head { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.gp-hero-icon { width: clamp(84px, 12vw, 132px); height: clamp(84px, 12vw, 132px); object-fit: contain; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); flex: none; }
.gp-head-text { min-width: min(100%, 16ch); }
.gp-view-head h2 { font-family: var(--disp); font-size: clamp(1.6rem,4vw,2.4rem); color: var(--green-0); font-weight: 600; }
.gp-head-text p { color: var(--dim); font-size: .9rem; margin-top: .3rem; }
/* the in-flight clone: fixed to the viewport, above everything, never interactive */
.gp-morph { position: fixed; z-index: 900; object-fit: contain; border-radius: 8px; background: var(--paper); pointer-events: none; box-shadow: 0 20px 50px rgba(22,53,42,.18); }

/* ── Photos / Awards emblems (Gallery page) ──
   Deliberately echoes the hub emblem above: a round plate you click, not a heading
   you scroll past. */
.em-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px,100%),1fr)); gap: 1.6rem; margin-top: 3rem; max-width: 860px; margin-inline: auto; }
.em-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; padding: 2rem 1.6rem 1.6rem; border: 1px solid var(--line); border-radius: 20px; background: var(--card); cursor: pointer; transition: transform .4s var(--ease), box-shadow .4s, border-color .3s; }
.em-card:hover, .em-card:focus-visible { transform: translateY(-5px); border-color: var(--green-2); box-shadow: 0 22px 54px rgba(22,53,42,.14); }
.em-card.on { border-color: var(--green-2); background: var(--paper); }
.em-ring { position: relative; width: clamp(120px, 20vw, 168px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; transition: transform .5s var(--ease); }
.em-card:hover .em-ring, .em-card.on .em-ring { transform: scale(1.05) rotate(-3deg); }
.em-ring img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; box-shadow: 0 12px 30px rgba(22,53,42,.12); }
.em-card b { font-family: var(--disp); font-size: 1.35rem; color: var(--green-0); font-weight: 600; margin-top: .6rem; }
.em-tease { font-size: .88rem; color: var(--mid); max-width: 32ch; }
.em-cta { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--green-2); margin-top: .4rem; }
.em-card.on .em-cta { color: var(--gold); }
.em-panel { margin-top: 2.6rem; }
.em-panel[hidden] { display: none; }

/* ── events, expos & press ── */
.ev-group { margin-top: 2.4rem; }
.ev-group:first-child { margin-top: 1.4rem; }
.ev-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .7rem; border-bottom: 1px solid var(--line); padding-bottom: .6rem; }
.ev-head h3 { font-family: var(--disp); font-size: 1.25rem; color: var(--green-0); font-weight: 600; }
.ev-n { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); background: var(--paper); border-radius: 5px; padding: 2px 8px; }
.ev-head p { flex: 1 1 100%; font-size: .86rem; color: var(--mid); }
.ev-list { list-style: none; margin: 0; padding: 0; }
.ev-item { display: flex; gap: 1.1rem; align-items: baseline; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.ev-item:last-child { border-bottom: 0; }
.ev-year { flex: none; width: 4.2ch; font-family: var(--disp); font-size: 1.05rem; font-weight: 600; color: var(--green-2); font-variant-numeric: tabular-nums; }
.ev-nodate .ev-year { color: var(--dim); }
.ev-body { min-width: 0; }
.ev-body b { font-family: var(--disp); font-size: 1.02rem; color: var(--green-0); font-weight: 600; }
.ev-body b a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ev-body b a:hover { color: var(--green-2); }
.ev-body p { font-size: .87rem; color: var(--mid); margin-top: .18rem; line-height: 1.5; }
.ev-place { color: var(--green-2); }
/* A missing year is marked, never invented — see the note above EVENTS in data.js. */
.ev-flag { display: inline-block; margin-top: .3rem; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); border: 1px dashed var(--line); border-radius: 5px; padding: 1px 7px; }
.ev-empty { margin-top: .9rem; padding: 1.1rem 1.2rem; border: 1px dashed var(--line); border-radius: 12px; font-size: .88rem; color: var(--mid); }

/* awards, as plates rather than the Qualifications page's rows */
.gaw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px,100%),1fr)); gap: 1.1rem; }
.gaw-card { position: relative; border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 14px; padding: 1.3rem 1.3rem 1.2rem; background: var(--card); }
.gaw-year { font-family: var(--disp); font-size: 1.5rem; color: var(--gold); font-weight: 600; line-height: 1; }
.gaw-card b { display: block; font-family: var(--disp); font-size: 1.06rem; color: var(--green-0); margin: .5rem 0 .35rem; line-height: 1.25; }
.gaw-card p { font-size: .86rem; color: var(--mid); }

/* ── Engineering Design Process strip (Design gallery) ── */
.edp-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px,100%),1fr)); gap: 12px; }
.edp-step { position: relative; border: 1px solid var(--line); border-top: 3px solid var(--green-3); border-radius: 14px; padding: 1.1rem 1rem 1rem; background: var(--card); }
.edp-n { position: absolute; top: -13px; inset-inline-start: 14px; width: 24px; height: 24px; border-radius: 50%; background: var(--green-2); color: #fff; font-size: .74rem; font-weight: 700; display: grid; place-items: center; }
.edp-step b { display: block; font-family: var(--disp); font-size: 1.02rem; color: var(--green-0); margin: .35rem 0 .4rem; }
.edp-step p { font-size: .84rem; color: var(--mid); line-height: 1.5; }

/* ── the six fields (Theories gallery) ── */
.field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px,100%),1fr)); gap: 1.1rem; }
.field-card { border: 1px solid var(--line); border-inline-start: 3px solid var(--gold); border-radius: 14px; padding: 1.1rem 1.2rem; background: var(--card); }
.fc-n { font-family: var(--disp); font-size: .8rem; color: var(--gold); letter-spacing: .08em; }
.field-card b { display: block; font-family: var(--disp); font-size: 1.08rem; color: var(--green-0); margin: .2rem 0 .45rem; }
.field-card p { font-size: .88rem; color: var(--mid); line-height: 1.55; }

/* ── manufacturing processes ── */
.proc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px,100%),1fr)); gap: 1.1rem; }
.proc-card { border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem 1.3rem; background: var(--card); display: flex; flex-direction: column; }
.proc-card b { font-family: var(--disp); font-size: 1.1rem; color: var(--green-0); }
.proc-how { display: block; font-size: .8rem; color: var(--green-2); margin: .25rem 0 .6rem; font-style: italic; }
.proc-card > p { font-size: .88rem; color: var(--mid); line-height: 1.55; }
.proc-mine { margin-top: auto; padding-top: .8rem; font-size: .82rem; color: var(--green-1); }
.proc-mine span { display: inline-block; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); background: var(--paper); border-radius: 5px; padding: 2px 7px; margin-inline-end: 7px; }

/* ── simulator run captures ── */
.run-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px,100%),1fr)); gap: 1.1rem; }
.run-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card); transition: transform .35s var(--ease), box-shadow .35s; }
.run-card:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(22,53,42,.10); }
.run-shot { position: relative; aspect-ratio: 16/9; background: var(--paper-2); }
.run-shot img, .run-shot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Shown only until the capture exists — an entry with no src must never ship as a
   broken frame (same guard as the mind-map cards). */
.run-tile { position: absolute; inset: 0; display: grid; place-items: center; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.run-body { padding: .9rem 1.1rem 1.1rem; }
.run-body b { font-family: var(--disp); font-size: 1rem; color: var(--green-0); }
.run-body p { font-size: .85rem; color: var(--mid); margin-top: .35rem; line-height: 1.5; }
.run-pending { border-style: dashed; }
.gp-hint { color: var(--mid); font-size: .95rem; margin: .5rem 0 1.4rem; max-width: 70ch; }
.gp-hint.center { text-align: center; margin: .8rem auto 0; }
.three-stage { position: relative; border-radius: 18px; background: linear-gradient(170deg, var(--paper), var(--snow) 70%); border: 1px solid var(--line); overflow: hidden; }
.three-stage canvas { display: block; cursor: grab; }
.three-stage canvas:active { cursor: grabbing; }
.gp-toolchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.4rem; justify-content: center; }

/* rotating ring carousel (CAD + Design) */
.ring-stage { position: relative; perspective: 1600px; display: grid; place-items: center; margin-top: .6rem; overflow: hidden; }
.ring3d { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.ring-slot { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.ring-card { position: absolute; transform: translate(-50%, -50%); backface-visibility: hidden; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--card); cursor: pointer; box-shadow: 0 18px 44px rgba(22,53,42,0.14); }
.ring-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; pointer-events: none; }
.ring-card figcaption { padding: 9px 12px; font-size: .8rem; color: var(--green-1); background: var(--card); font-weight: 500; line-height: 1.3; pointer-events: none; }

/* design brief */
.design-brief { max-width: 1020px; margin: 2.4rem auto 0; opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.design-brief.on { opacity: 1; transform: none; }
.db-head { display: flex; align-items: center; gap: 18px; margin-bottom: 1.5rem; }
.db-head img { width: 132px; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }
.db-head h3 { font-family: var(--disp); font-size: 1.6rem; color: var(--green-0); font-weight: 600; }
.db-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 14px; }
.db-step { position: relative; border: 1px solid var(--line); border-top: 3px solid var(--green-2); border-radius: 12px; background: var(--card); padding: 1.2rem 1.1rem 1rem; }
.db-n { position: absolute; top: -14px; inset-inline-start: 12px; width: 27px; height: 27px; border-radius: 50%; background: var(--green-2); color: #fff; display: grid; place-items: center; font-size: .8rem; font-weight: 700; }
.db-step b { font-family: var(--disp); color: var(--green-0); display: block; margin-bottom: 5px; }
.db-step p { font-size: .88rem; color: var(--mid); line-height: 1.55; }

/* robotics platform viewer */
.gp-robotics { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.8rem; align-items: start; }
.gpr-side .d-h { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-bottom: .7rem; font-weight: 700; }
.gpr-list { display: flex; flex-direction: column; gap: 8px; }
.gpr-item { text-align: start; border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 12px 14px; transition: all .25s var(--ease); cursor: pointer; }
.gpr-item:hover { border-color: var(--green-3); }
.gpr-item b { font-family: var(--disp); color: var(--green-0); display: block; font-size: .98rem; }
.gpr-item span { font-size: .8rem; color: var(--mid); }
.gpr-item.on { border-color: var(--green-2); box-shadow: 0 10px 26px rgba(22,53,42,0.12); background: #f3f7f2; }
.gpr-caption { margin-top: 1.1rem; }
.gpr-caption h3 { font-family: var(--disp); color: var(--green-0); font-size: 1.3rem; font-weight: 600; }
.gpr-caption p { color: var(--mid); font-size: .92rem; margin-top: 4px; max-width: 60ch; }
.gpr-caption .gp-toolchips { justify-content: flex-start; margin-top: .7rem; }

/* print strip */
.print-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px,100%),1fr)); gap: 14px; margin-top: 2rem; }

/* physics & math playground */
.math-wrap { max-width: 1000px; margin: 0 auto; }
.math-eq { font-family: var(--disp); font-size: clamp(1.3rem,3.4vw,2rem); color: var(--green-0); text-align: center; margin-bottom: 1.6rem; direction: ltr; }
.math-grid { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; direction: ltr; }
.math-grid canvas { border: 1px solid var(--line); border-radius: 14px; background: var(--snow); }
.math-controls { display: flex; gap: 1.6rem; flex-wrap: wrap; justify-content: center; margin-top: 1.4rem; align-items: center; }
.math-controls label { display: flex; align-items: center; gap: 10px; color: var(--mid); font-size: .9rem; }
.math-controls input[type=range] { accent-color: var(--green-2); width: 150px; }
.math-controls b { color: var(--green-1); min-width: 40px; font-family: var(--disp); }
.btn-ghost-sm { border: 1.4px solid var(--line); border-radius: 99px; width: 38px; height: 38px; font-size: 1.05rem; color: var(--green-1); }
.btn-ghost-sm:hover { border-color: var(--green-2); }

/* simulation world */
.sim-wrap { display: flex; flex-direction: column; align-items: center; direction: ltr; }
.sim-wrap canvas { border: 1px solid var(--line); border-radius: 16px; background: var(--snow); max-width: 100%; }
.sim-legend { display: flex; gap: 1.4rem; margin-top: .9rem; font-size: .84rem; color: var(--mid); flex-wrap: wrap; justify-content: center; }
.sl-truth { color: var(--green-2); font-weight: 600; }
.sl-est, .sl-fix { color: var(--gold); font-weight: 600; }

/* blog markdown content */
.a-content ul, .a-content ol { margin: 0 0 1.3rem 1.4rem; color: var(--green-0); font-size: 1.08rem; line-height: 1.8; }
[dir="rtl"] .a-content ul, [dir="rtl"] .a-content ol { margin: 0 1.4rem 1.3rem 0; }
.a-content blockquote { border-inline-start: 3px solid var(--green-3); padding-inline-start: 1rem; color: var(--mid); font-style: italic; margin: 0 0 1.3rem; }
.a-content code { background: var(--paper-2); border-radius: 5px; padding: 1px 6px; font-size: .9em; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.a-content pre { background: var(--green-0); color: #dce8e0; border-radius: 12px; padding: 16px; overflow-x: auto; margin-bottom: 1.3rem; }
.a-content pre code { background: none; color: inherit; padding: 0; }
.a-content img { border-radius: 12px; margin: 0 0 1.3rem; }
.a-content h3 { font-family: var(--disp); font-size: 1.25rem; margin: 1.6rem 0 .8rem; color: var(--green-1); }
.a-content a { color: var(--green-2); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.a-content hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

@media (max-width: 860px) {
  .gp-robotics { grid-template-columns: 1fr; }
  .hub-stage { min-height: 0; }
  .hub-cats { position: static; inset: auto; pointer-events: auto; display: none; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 2rem; width: 100%; place-items: stretch; }
  .burst .hub-cats { display: grid; }
  .cat-card { position: static; margin: 0; width: auto; min-height: 0; transform: none; }
}

/* ════ v8: journey path extras ════ */
#tlPath { fill: none; stroke: var(--green-3); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(47,107,79,0.45)); }
.tl-org { color: var(--green-2); font-size: .88rem; margin-top: 4px; font-weight: 600; }
.tl-note { color: var(--mid); font-size: .88rem; margin-top: 6px; line-height: 1.55; }
.tl-tag.j-tag-edu { color: var(--green-1); border-color: var(--green-3); }
.tl-tag.j-tag-work { color: #8a5e22; border-color: var(--gold); }
.tl-tag.j-tag-milestone { color: #fff; background: var(--green-2); border-color: var(--green-2); }
.tl-tag.j-tag-next { color: #fff; background: var(--gold); border-color: var(--gold); }
.j-milestone .tl-dot { background: var(--green-1); }
.j-next .tl-dot { background: var(--gold); box-shadow: 0 0 0 5px rgba(182,128,58,0.2); }

/* ════ v8: home research teaser ════ */
.focus-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px,100%),1fr)); gap: 1.2rem; margin-top: 3rem; }
.focus-card { position: relative; border: 1px solid var(--line); border-inline-start: 4px solid var(--c, var(--green-2)); border-radius: 16px; padding: 1.5rem 1.4rem; background: var(--card); cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.focus-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(22,53,42,0.1); }
.fc-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--c, var(--green-2)); margin-bottom: .7rem; }
.focus-card h3 { font-size: 1.15rem; color: var(--green-0); margin-bottom: .4rem; font-weight: 600; }
.focus-card p { color: var(--mid); font-size: .9rem; line-height: 1.5; }
.focus-cta { margin-top: 2.6rem; text-align: center; }
.btn-solid { background: var(--green-2); color: #fff; border-radius: 99px; padding: 13px 28px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; transition: background .35s var(--ease), transform .35s; }
.btn-solid:hover { background: var(--green-1); }

/* ════ v8: research-interests map ════ */
.rm-figure { margin-top: 2.6rem; overflow-x: auto; padding-bottom: 6px; }
.rm-svg { width: 100%; min-width: 680px; max-width: 940px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.rm-circle { fill: var(--c); fill-opacity: .07; stroke: var(--c); stroke-opacity: .35; stroke-width: 1.5; transition: fill-opacity .3s, stroke-opacity .3s, stroke-width .3s; }
.rm-circle.hi { fill-opacity: .17; stroke-opacity: .85; stroke-width: 2.4; }
.rm-circle.dim { fill-opacity: .03; stroke-opacity: .12; }
.rm-link { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 4 5; transition: stroke .3s, stroke-width .3s; }
.rm-link.hi { stroke: var(--green-2); stroke-width: 2.2; stroke-dasharray: none; }
.rm-hub { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--green-0); border-radius: 20px; color: var(--snow); padding: 8px 10px; box-shadow: 0 12px 32px rgba(22,53,42,0.28); }
.rm-hub b { font-family: var(--disp); font-size: 15px; font-weight: 600; line-height: 1.12; }
.rm-hub span { font-size: 10.5px; color: #b9d0c3; margin-top: 4px; }
.rm-card { height: 100%; background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: 12px; padding: 10px 12px; box-shadow: 0 8px 24px rgba(22,53,42,0.08); cursor: default; }
.rm-card b { font-family: var(--disp); font-size: 13.5px; color: var(--green-0); display: block; margin-bottom: 6px; font-weight: 600; }
.rm-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.rm-chips span { font-size: 10px; color: var(--mid); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; background: var(--snow); line-height: 1.5; }
.rm-caption { text-align: center; margin: 1.5rem auto 0; max-width: 78ch; color: var(--mid); font-size: .96rem; min-height: 3.2em; transition: color .3s; }
.rm-caption.on { color: var(--green-0); }
.rm-platforms { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin-top: 1.4rem; }
.rm-plabel { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.rm-pchip { border: 1px solid var(--line); border-radius: 99px; padding: 6px 14px; font-size: .85rem; color: var(--green-1); background: var(--snow); }

/* ════ v8: projects showcase ════ */
.proj-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 2rem 0 1.6rem; }
.proj-chip { border: 1.3px solid var(--line); background: var(--snow); color: var(--mid); border-radius: 99px; padding: 8px 18px; font-size: .9rem; font-weight: 500; transition: all .3s var(--ease); }
.proj-chip:hover { border-color: var(--green-3); color: var(--green-1); }
.proj-chip.on { background: var(--green-2); color: #fff; border-color: var(--green-2); }
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px,100%),1fr)); gap: 1.4rem; }
.proj-card { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card); cursor: pointer; transition: transform .4s var(--ease), box-shadow .4s; display: flex; flex-direction: column; }
.proj-card:hover { transform: translateY(-5px); box-shadow: 0 20px 46px rgba(22,53,42,0.12); }
.proj-cover { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--paper-2); }
.proj-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.proj-card:hover .proj-cover img { transform: scale(1.06); }
.proj-cat { position: absolute; top: 12px; inset-inline-start: 12px; background: color-mix(in srgb, var(--green-0) 78%, transparent); color: #fff; font-size: .72rem; padding: 4px 11px; border-radius: 99px; backdrop-filter: blur(6px); }
.proj-body { padding: 1.1rem 1.3rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.proj-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.proj-top h3 { font-family: var(--disp); font-size: 1.25rem; color: var(--green-0); font-weight: 600; }
.proj-year { color: var(--green-2); font-family: var(--disp); font-weight: 600; font-size: .9rem; }
.proj-body p { color: var(--mid); font-size: .92rem; margin: .5rem 0 1rem; line-height: 1.55; }
.proj-open { margin-top: auto; color: var(--green-2); font-weight: 600; font-size: .86rem; }

/* ════ v9 additions ════ */

/* #2 language toggle — globe pill */
.lang-toggle { width: auto; height: 36px; border-radius: 99px; border: 1.4px solid var(--green-2); color: var(--green-1); font-weight: 600; font-size: .82rem; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; background: var(--snow); transition: background .35s var(--ease), color .35s; }
.lang-toggle:hover { background: var(--green-2); color: #fff; }
.lang-globe { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.lang-toggle span { line-height: 1; }

/* #6 no custom cursor on touch devices */
@media (pointer: coarse) { #cursorDot, #cursorRing { display: none !important; } .hasCursor, .hasCursor a, .hasCursor button { cursor: auto; } }

/* #5 journey — vertical timeline with a growing fill line */
.jrny { position: relative; margin-top: 3rem; padding-inline-start: 8px; }
.jrny::before { content: ''; position: absolute; inset-inline-start: 8px; top: 6px; bottom: 6px; width: 2.5px; background: var(--line); border-radius: 99px; }
.jrny-fill { position: absolute; inset-inline-start: 8px; top: 6px; width: 2.5px; height: 0; background: linear-gradient(var(--green-2), var(--green-3)); border-radius: 99px; box-shadow: 0 0 8px rgba(47,107,79,0.4); transition: height .1s linear; }
.jrny-item { position: relative; padding: 0 0 1.8rem 2.4rem; }
[dir="rtl"] .jrny-item { padding: 0 2.4rem 1.8rem 0; }
.jrny-dot { position: absolute; inset-inline-start: 0; top: 8px; width: 18px; height: 18px; margin-inline-start: -8px; border-radius: 50%; background: var(--snow); border: 2.5px solid var(--dim); transition: border-color .4s var(--ease), background .4s, transform .4s; z-index: 1; }
.jrny-dot.on { border-color: var(--green-2); background: var(--green-2); transform: scale(1.12); box-shadow: 0 0 0 5px rgba(47,107,79,0.14); }
.j-next .jrny-dot.on { border-color: var(--gold); background: var(--gold); box-shadow: 0 0 0 5px rgba(182,128,58,0.18); }
.jrny-card { padding: 1.1rem 1.4rem; transition: transform .4s var(--ease), box-shadow .4s; }
.jrny-card:hover { transform: translateX(4px); box-shadow: 0 14px 34px rgba(22,53,42,0.1); }
[dir="rtl"] .jrny-card:hover { transform: translateX(-4px); }
.jrny-top { display: flex; align-items: center; gap: 10px; margin-bottom: .4rem; }
.jrny-card h3 { font-size: 1.12rem; color: var(--green-0); font-weight: 600; }

/* #7 organizations */
.org-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px,100%),1fr)); gap: 1.2rem; margin-top: 2.5rem; }
.org { padding: 1.5rem 1.6rem; transition: transform .4s var(--ease), box-shadow .4s; }
.org:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(22,53,42,0.1); }
.org-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.org-name { font-family: var(--disp); font-weight: 700; font-size: 1.25rem; color: var(--green-0); }
/* ── Site map (Home) ── */
.sm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px,100%),1fr)); gap: 1.1rem; margin-top: 2.6rem; }
.sm-card { position: relative; text-align: start; cursor: pointer; border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 1.25rem 1.35rem 1.5rem; display: grid; gap: .35rem; align-content: start; transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.sm-card:hover, .sm-card:focus-visible { transform: translateY(-4px); border-color: var(--green-2); box-shadow: 0 18px 40px rgba(22,53,42,.10); }
.sm-card .sm-n { font-family: var(--disp); font-size: .72rem; color: var(--gold); letter-spacing: .06em; }
.sm-card h3 { font-family: var(--disp); font-size: 1.18rem; font-weight: 600; color: var(--green-0); }
.sm-card p { color: var(--mid); font-size: .88rem; line-height: 1.5; }
.sm-go { position: absolute; inset-inline-end: 1.2rem; bottom: 1rem; color: var(--green-2); opacity: 0; transform: translateX(-6px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
html[dir="rtl"] .sm-go { transform: scaleX(-1) translateX(-6px); }
.sm-card:hover .sm-go, .sm-card:focus-visible .sm-go { opacity: 1; transform: translateX(0); }
html[dir="rtl"] .sm-card:hover .sm-go { transform: scaleX(-1) translateX(0); }

/* ── Research highlights band ── */
.rs-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px,100%),1fr)); gap: 1rem; margin-top: 2.4rem; }
.rs-item { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 1.2rem 1rem; text-align: center; display: grid; gap: .25rem; }
.rs-n { font-family: var(--disp); font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 600; color: var(--green-1); line-height: 1; }
.rs-l { font-size: .8rem; color: var(--mid); }
/* The Scholar numbers are a dated snapshot; saying so is the point of this line. */
.rs-foot { margin-top: .9rem; font-size: .78rem; color: var(--dim); }
.rs-foot a { color: var(--green-2); font-weight: 600; }

/* ── Mind maps (Blog page) ──
   Two columns at most: these are dense diagrams and a three-up grid renders them
   as texture rather than information. */
.mm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px,100%),1fr)); gap: 1.6rem; margin-top: 2.8rem; }
.mm-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card); transition: transform .4s var(--ease), box-shadow .4s, border-color .4s; }
.mm-card[role="button"] { cursor: pointer; }
.mm-card[role="button"]:hover, .mm-card[role="button"]:focus-visible { transform: translateY(-4px); border-color: var(--green-2); box-shadow: 0 18px 44px rgba(22,53,42,0.12); }
/* The shot keeps the diagram's own aspect ratio (set inline per entry) and the
   tile sits behind the image, so an entry with no artwork still reads as a card. */
.mm-shot { position: relative; width: 100%; background: var(--paper-2); border-bottom: 1px solid var(--line); overflow: hidden; }
.mm-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #FCFBF7; }
.mm-tile { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; text-align: center; padding: 1.2rem; }
.mm-tile b { font-family: var(--disp); font-size: 1.15rem; font-weight: 600; color: var(--green-1); opacity: .5; }
.mm-tile i { font-style: normal; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.mm-body { padding: 1.3rem 1.5rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.mm-card h3 { font-family: var(--disp); font-size: 1.25rem; font-weight: 600; color: var(--green-0); line-height: 1.2; }
.mm-card p { color: var(--mid); font-size: .92rem; margin-top: .6rem; }
.mm-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: auto; padding-top: 1rem; }
.mm-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mm-tags span { font-size: .72rem; color: var(--green-2); background: var(--paper); border-radius: 6px; padding: 2px 9px; }
.mm-full { font-size: .78rem; font-weight: 700; color: var(--green-2); white-space: nowrap; }
.mm-full:hover { color: var(--gold); }
/* Unpublished entries stay visibly provisional rather than pretending to be live. */
.mm-pending { border-style: dashed; }
.mm-pending .mm-body h3 { color: var(--green-1); }

/* ── Live figures mounted inside a blog post (see #postEmbeds in index.html) ──
   The holder must stay display:none even though a bare div would otherwise win
   over the [hidden] attribute's UA default. */
#postEmbeds[hidden] { display: none; }
.a-figure { margin: 2.4rem 0 2.6rem; }
.a-figure .areas-grid, .a-figure .arch-figure { margin-top: 0; }
/* The diagram and the plate grid both need more room than the 760px prose column,
   so on wide screens they break out symmetrically around it (RTL-safe). */
@media (min-width: 1180px) {
  .a-figure { width: min(1060px, calc(100vw - 9rem)); margin-inline: calc((760px - min(1060px, calc(100vw - 9rem))) / 2); }
}

/* ── CV block (Qualifications) ── */
.q-cv { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; padding: 1.1rem 1.4rem; margin: 1.6rem 0 .4rem; border-inline-start: 3px solid var(--gold); }
.q-cv h3 { font-family: var(--disp); font-size: 1.15rem; color: var(--green-0); font-weight: 600; }
.q-cv-btn { display: inline-block; padding: .62rem 1.35rem; border-radius: 99px; background: var(--green-1); color: var(--snow); font-weight: 700; font-size: .88rem; transition: background .3s var(--ease), transform .3s var(--ease); }
.q-cv-btn:hover, .q-cv-btn:focus-visible { background: var(--gold); transform: translateY(-2px); }

/* ── Expandable course lists (Qualifications) ──
   Native <details>, so keyboard + AT behaviour is free and nothing holds open state. */
.q-more { margin-top: .7rem; border-top: 1px dashed var(--line); padding-top: .55rem; }
.q-more > summary { cursor: pointer; list-style: none; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--green-2); display: inline-flex; align-items: center; gap: .4rem; }
.q-more > summary::-webkit-details-marker { display: none; }
.q-more > summary::before { content: "▸"; font-size: .8em; transition: transform .25s var(--ease); }
.q-more[open] > summary::before { transform: rotate(90deg); }
.q-more > summary:hover { color: var(--gold); }
.q-courses { list-style: none; margin: .6rem 0 .2rem; display: grid; gap: .3rem; }
.q-courses li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .86rem; color: var(--mid); padding: .22rem 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.q-courses li b { color: var(--green-1); font-weight: 700; font-size: .82rem; flex: none; }
.q-courses li.q-phase { display: block; border-bottom: none; color: var(--green-2); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; margin-top: .55rem; padding-bottom: .1rem; }
.q-courses li.q-phase:first-child { margin-top: 0; }

.org-handle { color: var(--gold); font-size: .85rem; }
/* Non-GitHub affiliations show the relationship where the handle would sit; the ones
   that DO have a handle show it as a line underneath instead. */
.org-tie { font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--green-2); background: color-mix(in srgb, var(--green-3) 16%, transparent); border: 1px solid color-mix(in srgb, var(--green-3) 38%, transparent); border-radius: 99px; padding: 2px 9px; }
.org-tie-line { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); margin-top: .15rem; }
.org-role { color: var(--green-2); font-weight: 600; font-size: .92rem; margin: .3rem 0 .6rem; }
.org-desc { color: var(--mid); font-size: .92rem; }
.org-links { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }
.org-links a { color: var(--green-2); font-weight: 600; font-size: .86rem; }
.org-links a:hover { color: var(--green-1); }

/* #16 teaching */
.teach-stats { display: flex; flex-wrap: wrap; gap: clamp(1.4rem,5vw,3.5rem); margin: 2.6rem 0 1rem; padding: 1.2rem 1.4rem; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
.tstat { display: flex; flex-direction: column; }
.tstat-n { font-family: var(--disp); font-weight: 600; font-size: clamp(1.6rem,4vw,2.4rem); color: var(--green-1); line-height: 1; }
.tstat-l { font-size: .8rem; color: var(--mid); margin-top: 5px; }
.teach-h { font-family: var(--disp); font-size: 1.4rem; color: var(--green-0); font-weight: 600; margin: 2.4rem 0 1.2rem; }
.teach-list { display: grid; gap: 1.2rem; }
.teach-card { display: grid; grid-template-columns: 150px 1fr; gap: 1.2rem; padding: 1.4rem 1.5rem; }
.teach-when { color: var(--green-2); font-family: var(--disp); font-weight: 600; font-size: .9rem; }
.teach-head h4 { font-size: 1.15rem; color: var(--green-0); }
.teach-code { color: var(--gold); font-family: var(--disp); }
.teach-org { color: var(--mid); font-size: .92rem; margin: .3rem 0 .6rem; }
.teach-note { color: var(--mid); font-size: .92rem; line-height: 1.6; }
.teach-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .9rem; }
.teach-tags span { font-size: .72rem; color: var(--green-2); background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 2px 9px; }

/* #9 gallery category icons (generated) */
.cc-icon { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; }
.gp-chip { display: inline-flex; align-items: center; gap: 7px; }
.gp-chip-i { width: 20px; height: 20px; object-fit: contain; border-radius: 4px; }
.gp-subh { font-family: var(--disp); font-size: 1.3rem; color: var(--green-0); font-weight: 600; text-align: center; margin: 2.6rem 0 1.2rem; }

/* #12 STL trophy showcase (dark + spotlight) */
.three-stage.dark { background: radial-gradient(120% 90% at 50% 12%, #1f2937 0%, #0d1013 62%); border-color: #23303a; }
.trophy-cap { text-align: center; margin-top: 1.2rem; }
.trophy-cap h3 { font-family: var(--disp); font-size: 1.4rem; color: var(--green-0); font-weight: 600; }
.trophy-cap p { color: var(--mid); font-size: .92rem; margin-top: 3px; }
.trophy-count { display: inline-block; margin-top: 8px; color: var(--gold); font-weight: 600; font-size: .85rem; }
.trophy-nav { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: 1rem; flex-wrap: wrap; }
.trophy-nav .gp-hint { margin: 0; text-align: center; }
.trophy-btn { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--green-2); color: var(--green-1); font-size: 1.5rem; line-height: 1; background: var(--snow); transition: background .25s, color .25s; }
.trophy-btn:hover { background: var(--green-2); color: #fff; }

/* #13 physics theory cards */
.theory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px,100%),1fr)); gap: 1.1rem; }
.theory-card { border: 1px solid var(--line); border-top: 3px solid var(--green-3); border-radius: 12px; background: var(--card); padding: 1.1rem 1.2rem; }
.theory-eq { font-family: ui-monospace, "SF Mono", Menlo, monospace; background: var(--green-0); color: #dce8e0; border-radius: 8px; padding: 8px 11px; font-size: .9rem; text-align: center; margin-bottom: .8rem; overflow-x: auto; white-space: nowrap; direction: ltr; }
.theory-card b { font-family: var(--disp); color: var(--green-0); display: block; margin-bottom: 5px; }
.theory-card p { color: var(--mid); font-size: .88rem; line-height: 1.55; }

/* #14 simulation stack cards */
.sim-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px,100%),1fr)); gap: 1.1rem; margin-top: .4rem; }
.sim-card { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 1.1rem 1.2rem; }
.sim-card.mine { border-color: var(--green-2); box-shadow: 0 2px 12px rgba(22,53,42,0.06); }
.sim-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.sim-card-top b { font-family: var(--disp); color: var(--green-0); font-size: 1rem; }
.sim-tag { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gold); border: 1px solid var(--line); border-radius: 99px; padding: 2px 9px; white-space: nowrap; }
.sim-card p { color: var(--mid); font-size: .88rem; line-height: 1.5; }

/* #15 robotics 3D ⇄ photo toggle */
.gpr-cap-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gpr-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
.gpr-toggle button { padding: 5px 13px; font-size: .8rem; color: var(--mid); background: var(--snow); transition: all .25s; }
.gpr-toggle button.on { background: var(--green-2); color: #fff; }
.gpr-view3d { position: relative; min-width: 0; }
.gpr-photo { position: absolute; inset: 0; z-index: 2; border-radius: 18px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); }
.gpr-photo img { width: 100%; height: 100%; object-fit: cover; }
.gpr-stage { position: relative; }
.gpr-view3d.show-photo .three-stage { visibility: hidden; }

/* #8 research map + mental model on mobile */
.rm-mobile { display: none; }
.rm-mobile .rm-hub-m { text-align: center; background: var(--green-0); color: var(--snow); border-radius: 14px; padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.rm-mobile .rm-hub-m b { font-family: var(--disp); font-size: 1.2rem; display: block; }
.rm-mobile .rm-hub-m span { color: #b9d0c3; font-size: .85rem; }
.rm-mcard { border: 1px solid var(--line); border-inline-start: 4px solid var(--c); border-radius: 12px; padding: 1rem 1.2rem; margin-bottom: .9rem; background: var(--card); }
.rm-mcard b { font-family: var(--disp); color: var(--green-0); display: block; margin-bottom: 8px; }
.rm-mcard .rm-chips { margin-bottom: 8px; }
.rm-mcard p { color: var(--mid); font-size: .86rem; line-height: 1.55; }

@media (max-width: 720px) {
  .rm-figure, .rm-caption { display: none; }
  .rm-mobile { display: block; }
  .arch-svg { min-width: 540px; }
  .arch-figure { border: 1px solid var(--line); border-radius: 14px; padding: 8px; }
  .teach-card { grid-template-columns: 1fr; gap: .5rem; }
}

/* v9 overflow-safety: 3D/canvas stages must be able to shrink below content */
.gp-view, .gp-world, .gpr-stage, .gpr-side, .math-wrap, .sim-wrap { min-width: 0; }
.three-stage { max-width: 100%; }
.three-stage canvas { max-width: 100%; }
.math-grid canvas, .sim-wrap canvas { max-width: 100%; height: auto; }

/* #4 mobile navbar — keep it to logo · lang · menu */
@media (max-width: 900px) {
  .navbar { flex-wrap: nowrap; gap: .5rem; }
  .nav-cta { display: none; }
  .nav-menu { gap: .7rem; margin-inline-start: auto; }
  .nav-menu.active .nav-links { gap: 1.3rem; padding: 1.8rem 2rem; }
  .lang-toggle { height: 34px; padding: 0 12px; }
}

/* ════ v10: qualifications + software-way + misc ════ */
.cert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px,100%),1fr)); gap: 1.2rem; }
.cert { padding: 1.4rem 1.5rem; position: relative; }
.cert-year { color: var(--gold); font-family: var(--disp); font-weight: 700; font-size: .9rem; }
.cert h4 { font-size: 1.1rem; color: var(--green-0); margin: .3rem 0 .2rem; }
.prog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px,100%),1fr)); gap: 1.2rem; }
.prog { padding: 1.3rem 1.4rem; }
.prog-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.prog-top h4 { font-size: 1.02rem; color: var(--green-0); line-height: 1.3; }
.prog-n { color: var(--gold); font-family: var(--disp); font-weight: 700; font-size: .85rem; white-space: nowrap; }
.award-list { display: grid; gap: .9rem; }
.award-row { display: grid; grid-template-columns: 90px 1fr; gap: 1rem; align-items: center; padding: 1rem 1.3rem; }
.award-row h4 { font-size: 1.02rem; color: var(--green-0); }
.gp-skillrow { display: flex; flex-direction: column; align-items: center; gap: .4rem; margin-top: 1.6rem; }
.gp-skilllabel { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); font-weight: 700; }
.soft-repos { margin-top: 0; }
.soft-gh { color: var(--green-2); font-weight: 700; }
@media (max-width: 720px) { .award-row { grid-template-columns: 1fr; gap: .2rem; } }

/* ════ v11: research-areas plates + web-work showcase ════ */
.areas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px,100%),1fr)); gap: 1.4rem; margin-top: 2.8rem; }
.area-card { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card); transition: transform .4s var(--ease), box-shadow .4s; }
.area-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(22,53,42,0.12); }
.area-plate { background: var(--paper); border-bottom: 1px solid var(--line); }
.area-plate img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.area-body { padding: 1.1rem 1.3rem 1.3rem; }
.area-body h3 { font-family: var(--disp); font-size: 1.15rem; color: var(--green-0); font-weight: 600; }
.area-body p { color: var(--mid); font-size: .9rem; margin-top: .4rem; line-height: 1.55; }

/* ── Active research projects ──
   Text-first cards: these have no photos, so the hierarchy is title + status, the
   blurb, then a small definition list of lead and funding. The status pill is the
   fastest read on the card, which is the point — several are proposals, not awards. */
.ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px,100%),1fr)); gap: 1.3rem; margin-top: 2.6rem; }
.ap-card { border: 1px solid var(--line); border-left: 3px solid var(--green-2); border-radius: 14px; background: var(--card); padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .7rem; transition: transform .35s var(--ease), box-shadow .35s, border-left-color .35s; }
.ap-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(22,53,42,.10); border-left-color: var(--gold); }
html[dir="rtl"] .ap-card { border-left: 1px solid var(--line); border-right: 3px solid var(--green-2); }
html[dir="rtl"] .ap-card:hover { border-right-color: var(--gold); }
.ap-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.ap-head h3 { font-family: var(--disp); font-size: 1.16rem; font-weight: 600; color: var(--green-0); line-height: 1.3; }
.ap-state { flex: none; font-size: .68rem; letter-spacing: .04em; padding: 3px 10px; border-radius: 99px; color: var(--green-1); background: color-mix(in srgb, var(--green-3) 18%, transparent); border: 1px solid color-mix(in srgb, var(--green-3) 40%, transparent); }
.ap-blurb { color: var(--mid); font-size: .92rem; line-height: 1.55; }
.ap-meta { display: grid; gap: .35rem; margin-top: auto; padding-top: .5rem; border-top: 1px dashed var(--line); }
.ap-row { display: grid; grid-template-columns: 5.6rem 1fr; gap: .6rem; font-size: .82rem; }
.ap-row dt { color: var(--dim); letter-spacing: .04em; text-transform: uppercase; font-size: .68rem; padding-top: .15rem; }
.ap-row dd { color: var(--green-0); }
.ap-tech { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-tech span { font-size: .7rem; color: var(--green-2); background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; }

/* ── Projects-page section index ──
   Sits at the top of the page so every section is discoverable without scrolling.
   Buttons, not anchors: they scroll via Lenis, and an href would fight the router. */
/* Top padding clears the fixed 70px navbar — the sections below get away with it via
   their own clamp(4.5rem,…) padding, this row would sit under the bar without it. The
   max-width/gutter mirror `.section` so the chips line up with everything beneath them. */
.sec-index { display: flex; flex-wrap: wrap; gap: .6rem; max-width: 1320px; margin: 0 auto; padding: calc(70px + 1.8rem) clamp(1.1rem,5vw,4rem) 0; }
.sec-chip { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem .95rem .5rem .7rem; border: 1px solid var(--line); border-radius: 99px; background: var(--card); color: var(--green-0); font-size: .84rem; cursor: pointer; transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s; }
.sec-chip:hover, .sec-chip:focus-visible { border-color: var(--green-2); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(22,53,42,.10); }
.sec-chip .sc-n { font-family: var(--disp); font-size: .74rem; color: var(--gold); letter-spacing: .04em; }
.sec-chip .sc-l { font-weight: 600; }
@media (max-width: 640px) { .sec-index { gap: .45rem; } .sec-chip { font-size: .78rem; padding: .42rem .8rem .42rem .6rem; } }

/* ── Showcase blocks (Personal · Tools · Project pages) ──
   Each block carries its own accent so the three kinds are separable at a glance;
   the accent drives the dot, the count pill and the card tags inside it. */
.web-blocks { margin-top: 2.4rem; display: grid; gap: 3rem; }
.web-block { --wb: var(--green-2); }
.wb-personal { --wb: var(--green-1); }
.wb-tools    { --wb: var(--gold); }
.wb-papers   { --wb: var(--slate); }
.wb-head { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: .7rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.wb-head h3 { font-family: var(--disp); font-size: 1.35rem; font-weight: 600; color: var(--green-0); }
.wb-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--wb); box-shadow: 0 0 0 4px color-mix(in srgb, var(--wb) 18%, transparent); }
.wb-count { font-size: .74rem; color: var(--wb); border: 1px solid color-mix(in srgb, var(--wb) 40%, transparent); background: color-mix(in srgb, var(--wb) 8%, transparent); border-radius: 99px; padding: 1px 9px; }
.wb-note { grid-column: 1 / -1; color: var(--mid); font-size: .9rem; margin-top: -.2rem; }
.web-block .web-tag { background: color-mix(in srgb, var(--wb) 86%, transparent); }
.web-block .web-card:hover { border-color: color-mix(in srgb, var(--wb) 45%, var(--line)); }
.web-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px,100%),1fr)); gap: 1.4rem; margin-top: 1.6rem; }

/* ── Standalone: the local-only builds ──
   A wide callout rather than a card. Nobody can visit these, so the commission ask
   is the point of the block — it gets a real button instead of a text link. */
.web-standalone { border: 1px solid var(--line); border-radius: 18px; padding: clamp(1.4rem, 3vw, 2.4rem); background: linear-gradient(135deg, var(--paper) 0%, var(--paper-2) 55%, color-mix(in srgb, var(--green-3) 22%, var(--paper-2)) 100%); }
.ws-inner { max-width: 68ch; display: grid; gap: .75rem; justify-items: start; }
/* Must out-specify `.web-tag` (declared later in this file, position:absolute). A bare
   `.ws-tag` loses that tie, and since .web-standalone isn't positioned the label escapes
   the card and hangs loose on the page. */
.web-standalone .ws-tag { position: static; background: var(--green-0); }
.web-standalone h3 { font-family: var(--disp); font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--green-0); font-weight: 600; }
.web-standalone p { color: var(--mid); font-size: .96rem; line-height: 1.6; }
.ws-cta { display: inline-block; margin-top: .5rem; padding: .7rem 1.5rem; border-radius: 99px; background: var(--green-1); color: var(--snow); font-weight: 700; font-size: .92rem; transition: background .3s var(--ease), transform .3s var(--ease); }
.ws-cta:hover, .ws-cta:focus-visible { background: var(--gold); transform: translateY(-2px); }
.web-note { color: var(--dim); font-size: .8rem; font-style: italic; }
.web-card { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card); display: flex; flex-direction: column; transition: transform .4s var(--ease), box-shadow .4s; }
.web-card:hover { transform: translateY(-5px); box-shadow: 0 20px 46px rgba(22,53,42,0.12); }
.web-cover { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--paper-2); }
.web-cover img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
/* Cover fallback. Entries without a generated thumbnail would otherwise render a
   broken image, because the cover <img> src is derived from the entry id. The tile
   sits *behind* the image; if the image 404s it removes itself (see renderWebwork)
   and the tile shows through. So a new WEBWORK entry never needs art to ship. */
.web-tile { position: absolute; inset: 0; z-index: 0; display: grid; align-content: center; gap: .4rem; padding: 1.2rem 1.35rem; background: linear-gradient(135deg, var(--paper) 0%, var(--paper-2) 65%, var(--green-3) 340%); }
.web-tile b { font-family: var(--disp); font-size: 1.16rem; font-weight: 600; line-height: 1.25; color: var(--green-1); }
.web-tile i { font-style: normal; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--green-2); opacity: .7; }
.web-card:hover .web-cover img { transform: scale(1.05); }
.web-tag { position: absolute; top: 12px; inset-inline-start: 12px; background: color-mix(in srgb, var(--green-0) 80%, transparent); color: #fff; font-size: .7rem; letter-spacing: .04em; padding: 4px 11px; border-radius: 99px; backdrop-filter: blur(6px); }
.web-body { padding: 1.1rem 1.3rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.web-body h3 { font-family: var(--disp); font-size: 1.25rem; color: var(--green-0); font-weight: 600; }
.web-body p { color: var(--mid); font-size: .92rem; margin: .5rem 0 .9rem; line-height: 1.55; }
.web-tech { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1rem; }
.web-tech span { font-size: .72rem; color: var(--green-2); background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 2px 9px; }
.web-links { display: flex; gap: 1.1rem; margin-top: auto; }
.web-links a { color: var(--green-2); font-weight: 700; font-size: .86rem; }
.web-links a:hover { color: var(--green-1); }
.web-nolink { color: var(--dim); font-size: .82rem; font-style: italic; }

/* ════ admin content editor (owner-only; hidden until opened) ════ */
.admin-panel { position: fixed; inset: 0; z-index: 9400; display: grid; place-items: center; background: rgba(13,16,19,0.55); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
.admin-panel.on { opacity: 1; pointer-events: auto; }
.admin-box { position: relative; width: min(720px, 94vw); max-height: 90vh; overflow-y: auto; background: var(--snow); border: 1px solid var(--line); border-radius: 16px; padding: 1.6rem 1.7rem; box-shadow: 0 30px 80px rgba(0,0,0,0.4); direction: ltr; }
.admin-x { position: absolute; top: 14px; right: 16px; font-size: 1.1rem; color: var(--mid); width: 34px; height: 34px; border-radius: 50%; }
.admin-x:hover { background: var(--paper); color: var(--green-0); }
.admin-brand { font-family: var(--disp); font-weight: 600; font-size: 1.3rem; color: var(--green-0); margin-bottom: 1.1rem; }
.admin-note { color: var(--mid); font-size: .95rem; margin-bottom: 1rem; line-height: 1.6; }
.admin-in { display: block; width: 100%; margin-bottom: .8rem; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; font-size: .95rem; background: #fff; }
.admin-in:focus { outline: none; border-color: var(--green-2); }
.admin-btn { border: 1px solid var(--line); border-radius: 10px; padding: 9px 18px; font-weight: 600; font-size: .9rem; color: var(--green-1); background: #fff; transition: all .25s var(--ease); }
.admin-btn:hover { border-color: var(--green-3); }
.admin-btn.accent { background: var(--green-2); color: #fff; border-color: var(--green-2); }
.admin-btn.accent:hover { background: var(--green-1); }
.admin-btn.small { padding: 6px 13px; font-size: .82rem; }
.admin-step2 { margin-top: 1rem; }
.admin-msg { margin-top: .9rem; font-size: .86rem; color: var(--mid); min-height: 1.2em; }
.admin-msg.ok { color: var(--green-2); font-weight: 600; }
.admin-msg.err { color: var(--c-movie, #c0522f); font-weight: 600; }
.admin-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 1rem; }
.admin-who { color: var(--green-2); font-weight: 600; font-size: .88rem; }
.admin-lbl { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-weight: 700; margin-bottom: .9rem; }
.admin-sel { display: block; width: 100%; margin-top: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: .92rem; background: #fff; color: var(--green-0); }
.admin-json { width: 100%; min-height: 320px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .82rem; line-height: 1.5; background: #fbfbf8; color: var(--green-0); resize: vertical; white-space: pre; }
.admin-json:focus { outline: none; border-color: var(--green-2); }
.admin-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1rem; }

/* guided "Site text" editor — labeled EN/AR fields */
.admin-hint { font-size: .82rem; color: var(--ink-soft, #6b6f66); margin: 0 0 12px; line-height: 1.5; }
.admin-tgroup { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; background: #fbfbf8; overflow: hidden; }
.admin-tgroup > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; font-size: .9rem; color: var(--green-0); list-style: none; user-select: none; }
.admin-tgroup > summary::-webkit-details-marker { display: none; }
.admin-tgroup > summary::before { content: "▸ "; color: var(--green-2); }
.admin-tgroup[open] > summary::before { content: "▾ "; }
.admin-tgroup[open] > summary { border-bottom: 1px solid var(--line); }
.admin-trow { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 8px; align-items: start; padding: 8px 14px; }
.admin-trow + .admin-trow { border-top: 1px dashed var(--line); }
.admin-tlabel { font-size: .78rem; color: var(--ink-soft, #6b6f66); padding-top: 7px; line-height: 1.3; }
.admin-tin { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: .85rem; line-height: 1.45; background: #fff; color: var(--green-0); resize: vertical; }
.admin-tin[dir="rtl"] { font-family: 'Tajawal', var(--body); }
.admin-tin:focus { outline: none; border-color: var(--green-2); }
.admin-tin.wide { width: 100%; display: block; margin-bottom: 8px; }

/* ── media manager ── */
.admin-btn.gold { border-color: var(--gold); color: var(--gold); }
.admin-btn.gold:hover { background: var(--gold); color: #fff; }
.admin-btn.tiny { padding: 3px 8px; font-size: .72rem; }
.admin-btn.danger { color: #a33; border-color: rgba(170,51,51,.4); }
.admin-btn.danger:hover { background: #a33; color: #fff; border-color: #a33; }
.admin-note.small { font-size: .76rem; margin: -2px 0 8px; }
.admin-prog { height: 3px; border-radius: 3px; background: var(--paper-2); overflow: hidden; margin: 8px 0; }
.admin-prog span { display: block; height: 100%; width: 40%; background: var(--green-2); animation: adprog 1.1s ease-in-out infinite; }
@keyframes adprog { 0% { margin-inline-start: -40%; } 100% { margin-inline-start: 100%; } }
.admin-mlist { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.admin-mhead { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.admin-mrow { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.admin-mthumb { width: 46px; height: 34px; object-fit: cover; border-radius: 5px; background: var(--paper-2); flex: none; }
.admin-mthumb.model { display: grid; place-items: center; font-size: .68rem; font-weight: 700; color: var(--green-2); }
.admin-mmeta { min-width: 0; flex: 1; }
.admin-mmeta b { display: block; font-size: .82rem; color: var(--green-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-mmeta span { font-size: .68rem; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
@media (max-width: 560px) { .admin-trow { grid-template-columns: 1fr; } .admin-tlabel { padding-top: 0; } }

/* Arabic / RTL */
[dir="rtl"] body, [dir="rtl"] { font-family: 'Tajawal', var(--body); }
[dir="rtl"] .rm-caption, [dir="rtl"] .rm-hub, [dir="rtl"] .rm-card, [dir="rtl"] .rm-mcard { direction: rtl; }
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,[dir="rtl"] .brand,[dir="rtl"] .stat-n,[dir="rtl"] .row-when,[dir="rtl"] .tl-year { font-family: 'Tajawal', var(--disp); letter-spacing: 0; font-weight: 700; }
[dir="rtl"] .hero-title { letter-spacing: 0; line-height: 1.25; }
[dir="rtl"] .eyebrow, [dir="rtl"] .hero-kicker { letter-spacing: 0; }
[dir="rtl"] .pub-table thead th { text-align: right; }
[dir="rtl"] .pub-row td { text-align: right; }
[dir="rtl"] .repo-lang, [dir="rtl"] .tl-tag, [dir="rtl"] .pub-doi { direction: ltr; display: inline-block; }