:root{color-scheme:dark;--bg:#0b1220;--bg2:#101b2d;--panel:#1a293d;--border:#30475e;--text:#eaf1f8;--muted:#afbed0;--cyan:#31cbea;--cyan2:#a7f2ff;--max:1120px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:86px}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 system-ui,-apple-system,Segoe UI,sans-serif}a{color:var(--cyan2)}button,input{font:inherit}button{cursor:pointer}.skip{position:absolute;left:-9999px;top:5px;background:white;color:black;padding:8px;z-index:20}.skip:focus{left:8px}.header{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px max(22px,calc((100vw - var(--max))/2));background:#0b1220ef;border-bottom:1px solid var(--border);backdrop-filter:blur(14px)}.brand,.mono,h2,.eyebrow,.tag,.status{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.brand{white-space:nowrap;font-size:18px;font-weight:800;text-decoration:none;color:white}.brand span,.accent{color:var(--cyan)}nav{display:flex;flex-wrap:wrap;gap:14px}nav a{font-size:12px;color:var(--muted);text-decoration:none}nav a:hover,nav a:focus{color:var(--cyan)}.menu-toggle{display:none;background:var(--panel);border:1px solid var(--border);border-radius:7px;color:white;padding:6px 10px}.section{padding:76px max(22px,calc((100vw - var(--max))/2));border-bottom:1px solid #203246}.section:nth-child(even){background:var(--bg2)}.hero{padding-top:110px;padding-bottom:105px;background:radial-gradient(ellipse at 80% 20%,#11405a70,transparent 52%),var(--bg)}.eyebrow{color:var(--cyan);font-size:14px;letter-spacing:.03em}h1{font-size:clamp(48px,8vw,92px);letter-spacing:-.065em;line-height:1.1;margin:12px 0}h2{font-size:clamp(25px,4vw,35px);letter-spacing:-.045em;margin:0 0 10px}h3{line-height:1.3;margin:0 0 8px;font-size:19px}.lead{font-size:clamp(17px,2.2vw,21px);color:#d1dfec;max-width:730px}.muted,.intro{color:var(--muted)}.intro{max-width:750px;margin:0 0 28px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.btn{display:inline-flex;align-items:center;gap:8px;background:var(--cyan);color:#06202b;text-decoration:none;border:1px solid var(--cyan);padding:10px 18px;border-radius:7px;font-weight:750}.btn.alt{background:transparent;color:var(--cyan2)}.btn:hover,.btn:focus{filter:brightness(1.13)}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:17px}.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:22px;min-width:0;transition:border-color .15s,transform .15s}.card:hover{border-color:#44b4ce;transform:translateY(-2px)}.card p{color:var(--muted);margin:8px 0 15px}.card .icon{font-size:28px;color:var(--cyan);margin-bottom:12px}.tag{display:inline-block;font-size:11px;color:var(--cyan2);border:1px solid #346179;border-radius:4px;padding:2px 7px;margin:3px 5px 3px 0}.card button,.filter button{background:#18334a;color:var(--cyan2);border:1px solid #346179;border-radius:6px;padding:7px 12px}.card button:hover,.filter button:hover,.filter button[aria-pressed=true]{background:var(--cyan);color:#052332}.subheading{margin:40px 0 17px;color:#eaf1f8;font-size:22px}.filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:19px}.search{display:block;width:min(100%,490px);background:#0d1928;color:white;border:1px solid #53728a;border-radius:8px;padding:12px;margin:0 0 17px}.empty{color:var(--muted);padding:20px;border:1px dashed var(--border);border-radius:8px}.timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px}.timeline .card{border-top:3px solid var(--cyan)}.timeline strong{color:var(--cyan)}.footer{padding:30px max(22px,calc((100vw - var(--max))/2));display:flex;gap:20px;justify-content:space-between;flex-wrap:wrap;color:var(--muted);font-size:13px}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#57d8aa;margin-right:7px}dialog{max-width:650px;width:calc(100% - 30px);max-height:85vh;overflow:auto;background:#15243a;color:var(--text);border:1px solid #4d7890;border-radius:13px;padding:28px;box-shadow:0 20px 90px #0009}dialog::backdrop{background:#020812bd}.close{float:right;border:0;background:transparent;color:white;font-size:32px;line-height:1}#detail-content{clear:both}#detail-content p{color:var(--muted)}.link-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}.link-row a{border:1px solid #41738b;border-radius:6px;padding:7px 12px;text-decoration:none}.notice{background:#123044;border-left:3px solid var(--cyan);padding:14px;color:#d1e8f4;border-radius:4px}.small{font-size:13px}.card-image{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:7px;margin-bottom:12px}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #f9d47c;outline-offset:3px}@media(max-width:760px){.menu-toggle{display:block}nav{display:none;position:absolute;top:60px;left:0;right:0;padding:16px 22px;background:#101b2d;border-bottom:1px solid var(--border);flex-direction:column}nav.open{display:flex}.section{padding-top:55px;padding-bottom:55px}.hero{padding-top:85px}.header{padding:13px 22px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* V0.2 subtle terminal motion */
.typewriter{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;min-height:1.18em}.typewriter::after{content:"_";color:var(--cyan);animation:cursor-blink .85s steps(1,end) infinite}@keyframes cursor-blink{50%{opacity:0}}
.btn,.card,.filter button,.cv-choice,.link-row a{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease,filter .22s ease}
.btn:hover,.btn:focus-visible,.card:hover,.card:focus-within,.filter button:hover,.cv-choice:hover,.cv-choice:focus-visible{box-shadow:0 0 0 1px #31cbea55,0 10px 32px #19b6d126;transform:translateY(-3px)}
.section{scroll-margin-top:84px}.section.arrived>.eyebrow{animation:arrival 1.2s ease}@keyframes arrival{0%,45%{text-shadow:0 0 16px #31cbea;color:#d6faff}100%{text-shadow:none}}
.reveal-ready:not(.is-visible){opacity:0;transform:translateY(17px)}.reveal-ready{transition:opacity .55s ease,transform .55s ease}.reveal-ready.is-visible{opacity:1;transform:none}
.hero{background-image:linear-gradient(#0f32442a 1px,transparent 1px),linear-gradient(90deg,#0f32442a 1px,transparent 1px),radial-gradient(ellipse at 80% 20%,#11405a70,transparent 52%);background-size:44px 44px,44px 44px,auto}
.social-links{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}.social-links .btn{font-size:14px}
.timeline{position:relative}.timeline::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 16px #31cbea66;transform-origin:left;animation:draw-line 1.5s ease both}@keyframes draw-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.typewriter::after{animation:none}.reveal-ready:not(.is-visible){opacity:1;transform:none}.timeline::before{animation:none}}


/* V0.2.1 — luminous glass: longer, more visible transitions */
:root{--glow:#31cbea;--glass:#1c3a53a8}
html{scroll-behavior:smooth}
body{background-image:radial-gradient(ellipse at 10% 18%,#08749b14,transparent 42%),radial-gradient(ellipse at 95% 75%,#19b6d10d,transparent 38%)}
.section{position:relative;isolation:isolate;scroll-margin-top:90px}
.section::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(115deg,transparent 15%,#31cbea0b 46%,transparent 75%);opacity:.35}
.section.arrived::before{animation:section-wash 2.5s ease-out both}
@keyframes section-wash{0%{opacity:0;background-position:110% 0}35%{opacity:1}100%{opacity:.35;background-position:0 0}}
.section.arrived>.eyebrow{animation:arrival 2.1s ease-out}
@keyframes arrival{0%,30%{color:#eaffff;text-shadow:0 0 9px #31cbea,0 0 32px #31cbea}100%{text-shadow:0 0 0 transparent}}
.reveal-ready{transition:opacity 1.05s cubic-bezier(.2,.8,.2,1),transform 1.05s cubic-bezier(.2,.8,.2,1)}
.reveal-ready:not(.is-visible){transform:translateY(38px);opacity:0}
/* Animated translucent gradients inside interactive gallery frames */
.card,.cv-choice,.btn,.link-row a,.filter button{position:relative;isolation:isolate;transition:transform .6s cubic-bezier(.18,.8,.2,1),box-shadow .75s ease,border-color .65s ease,background .65s ease,filter .65s ease}
.card{overflow:hidden;background:linear-gradient(130deg,#20374bdb,#1a293de8 62%,#14283be8);box-shadow:inset 0 1px #ffffff0a}
.card::before{content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;background:linear-gradient(115deg,transparent 10%,#31cbea09 35%,#84edff32 49%,#31cbea0c 62%,transparent 85%);background-size:220% 100%;background-position:110% 0;opacity:0;transition:opacity .65s ease}
.card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse at 80% 5%,#31cbea23,transparent 62%);opacity:0;transition:opacity .85s ease}
.card:hover,.card:focus-within{border-color:#66e6fa;transform:translateY(-6px);box-shadow:0 0 0 1px #31cbea65,0 0 22px #31cbea42,0 20px 42px #06121d90,inset 0 0 25px #31cbea0b}
.card:hover::before,.card:focus-within::before{opacity:1;animation:glass-sweep 3.8s ease-in-out infinite alternate}
.card:hover::after,.card:focus-within::after{opacity:1;animation:inner-breathe 3.6s ease-in-out infinite alternate}
@keyframes glass-sweep{0%{background-position:110% 0}100%{background-position:-110% 0}}
@keyframes inner-breathe{0%{opacity:.35}100%{opacity:1}}
.btn:hover,.btn:focus-visible,.filter button:hover,.filter button:focus-visible,.cv-choice:hover,.cv-choice:focus-visible,.link-row a:hover,.link-row a:focus-visible{transform:translateY(-4px);box-shadow:0 0 0 1px #7ceaff88,0 0 18px #31cbea75,0 9px 26px #31cbea25;filter:brightness(1.13)}
.filter button[aria-pressed=true],.cv-choice[aria-pressed=true]{box-shadow:0 0 0 1px #66e6fa90,0 0 17px #31cbea66,inset 0 0 15px #ffffff16;animation:selection-breathe 3.4s ease-in-out infinite}
@keyframes selection-breathe{50%{box-shadow:0 0 0 1px #a0f6ff,0 0 27px #31cbea88,inset 0 0 21px #ffffff26}}
nav a{position:relative;transition:color .45s ease,text-shadow .45s ease}
nav a:hover,nav a:focus-visible{color:#d7fbff;text-shadow:0 0 12px #31cbea9c}
nav a::after{content:"";position:absolute;bottom:-5px;left:0;right:100%;height:2px;background:var(--cyan);box-shadow:0 0 10px var(--cyan);transition:right .55s ease}
nav a:hover::after,nav a:focus-visible::after{right:0}
.hero{background-size:44px 44px,44px 44px,auto;animation:hero-ambient 16s ease-in-out infinite alternate}
@keyframes hero-ambient{from{background-position:0 0,0 0,75% 10%}to{background-position:0 0,0 0,100% 38%}}
.typewriter::after{text-shadow:0 0 15px #31cbea88;animation:cursor-blink 1.15s steps(1,end) infinite}
.timeline::before{animation-duration:2.7s}
@media(prefers-reduced-motion:reduce){.section.arrived::before,.section.arrived>.eyebrow,.card:hover::before,.card:focus-within::before,.card:hover::after,.card:focus-within::after,.filter button[aria-pressed=true],.cv-choice[aria-pressed=true],.hero{animation:none!important}.reveal-ready:not(.is-visible){opacity:1;transform:none}.card:hover,.card:focus-within,.btn:hover,.btn:focus-visible{transform:none}html{scroll-behavior:auto}}

/* V0.2.2 — atmospheric lighting, layered translucent panels, portrait */
body{position:relative;isolation:isolate;background:#0b1220}
/* Fixed light sources are independent of section backgrounds, so the movement remains visible. */
body::before{content:"";position:fixed;inset:-20vh -15vw;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 38% 45% at 16% 30%,rgba(17,179,223,.23),transparent 72%),radial-gradient(ellipse 32% 38% at 82% 68%,rgba(31,95,200,.19),transparent 75%),radial-gradient(ellipse 30% 30% at 53% 4%,rgba(28,210,209,.11),transparent 76%);animation:ambient-drift 18s ease-in-out infinite alternate;will-change:transform,opacity}
@keyframes ambient-drift{0%{transform:translate3d(-4%,0,0) scale(1);opacity:.72}50%{transform:translate3d(5%,4%,0) scale(1.09);opacity:1}100%{transform:translate3d(-2%,-5%,0) scale(1.04);opacity:.84}}
.section,.section:nth-child(even){background-color:rgba(10,20,35,.67)}.section:nth-child(even){background-color:rgba(14,28,46,.79)}
.hero{background-color:rgba(9,18,32,.40)}
.section::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(112deg,transparent 14%,rgba(42,202,239,.035) 47%,transparent 79%);background-size:230% 100%;animation:section-shimmer 20s ease-in-out infinite alternate}
@keyframes section-shimmer{from{background-position:100% 0}to{background-position:0 0}}
.about-layout{display:flex;align-items:center;gap:clamp(24px,5vw,65px);max-width:1000px}.about-copy{flex:1;min-width:0}.portrait-frame{width:clamp(165px,24vw,260px);aspect-ratio:1;flex-shrink:0;border:1px solid rgba(71,220,245,.65);border-radius:18px;padding:5px;background:linear-gradient(130deg,rgba(41,203,234,.24),rgba(10,24,41,.55));box-shadow:0 0 22px rgba(49,203,234,.19),0 18px 55px rgba(0,0,0,.36);animation:portrait-breathe 6s ease-in-out infinite alternate;overflow:hidden}.about-portrait{width:100%;height:100%;object-fit:cover;border-radius:12px;filter:grayscale(100%)}
@keyframes portrait-breathe{to{box-shadow:0 0 35px rgba(49,203,234,.39),0 22px 60px rgba(0,0,0,.45)}}
.portrait-frame:hover{box-shadow:0 0 42px rgba(49,203,234,.52);transform:translateY(-3px);transition:transform .6s,box-shadow .6s}
@media(max-width:620px){.about-layout{flex-direction:column;align-items:flex-start}.portrait-frame{width:min(62vw,220px)}}
@media(prefers-reduced-motion:reduce){body::before,.section::after,.portrait-frame{animation:none!important}body::before{opacity:.65;transform:none!important}}
@media print{body::before,.section::after{display:none!important}}

/* v0.2.4: preserve authored line breaks and display opt-in references */
.card p, #detail-content p, .about-copy p { white-space: pre-line; }
.citation-marker { font-size: .75em; vertical-align: super; margin-left: .15em; }
.citation-marker a { color: var(--accent, #65dfff); text-decoration: underline; }
.sources-panel { margin-top: 1.2rem; border: 1px solid rgba(120,220,240,.25); border-radius: .7rem; padding: .7rem 1rem; }
.sources-panel summary { cursor: pointer; font-weight: 650; }
.sources-list { margin: .8rem 0 .2rem; padding-left: 1.5rem; }
.sources-list li { margin: .5rem 0; overflow-wrap: anywhere; }
.sources-list li:focus { outline: 2px solid currentColor; outline-offset: 3px; }
.source-number { margin-right: .35rem; }

/* v0.2.6: responsive, data-driven hero spotlight */
.hero-layout{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);align-items:center;gap:clamp(30px,5vw,76px);max-width:1370px;margin-inline:auto}
.hero-copy{min-width:0}.hero-copy h1{font-size:clamp(48px,6vw,88px)}
.spotlight{min-width:0}.spotlight-heading{font:700 15px/1.4 system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:0;margin:0 0 13px;color:var(--text)}
.spotlight-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.spotlight-tile{position:relative;display:block;aspect-ratio:1.62;min-width:0;overflow:hidden;border:1px solid #3b6077;border-radius:11px;background:#14283b;text-decoration:none;box-shadow:0 6px 22px #0003;transition:transform .2s,border-color .2s,box-shadow .2s}
.spotlight-tile:hover,.spotlight-tile:focus-visible{transform:translateY(-3px);border-color:var(--cyan);box-shadow:0 0 0 1px #31cbea55,0 12px 28px #0007}
.spotlight-image{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}.spotlight-tile:hover .spotlight-image{transform:scale(1.045)}
.spotlight-caption{position:absolute;inset:auto 0 0;display:flex;flex-direction:column;gap:2px;padding:23px 12px 10px;background:linear-gradient(transparent,rgba(3,12,25,.92) 58%,rgba(3,12,25,.96));color:#fff;text-shadow:0 1px 3px #0009}
.spotlight-caption strong{font-size:clamp(12px,1.1vw,15px);line-height:1.25}.spotlight-description{font-size:clamp(10px,.9vw,12px);color:#d3e9f4;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:980px){.hero-layout{grid-template-columns:1fr;gap:44px}.hero-copy h1{font-size:clamp(48px,9vw,88px)}.spotlight{max-width:660px}.spotlight-tile{aspect-ratio:1.85}.spotlight-caption strong{font-size:15px}.spotlight-description{font-size:12px}}
@media(max-width:480px){.spotlight-grid{gap:9px}.spotlight-tile{aspect-ratio:1.12}.spotlight-caption{padding:20px 8px 8px}.spotlight-caption strong{font-size:12px}.spotlight-description{font-size:10px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}
@media(prefers-reduced-motion:reduce){.spotlight-tile,.spotlight-image{transition:none!important}.spotlight-tile:hover,.spotlight-tile:focus-visible,.spotlight-tile:hover .spotlight-image{transform:none!important}}