/* SELA Photonics — site styles. Single committed light theme. */
:root {
  --ground:#0C1116; --surface:#10161C; --panel:#131B23;
  --ink:#EDF2F6; --ink-2:#B4C0CA; --ink-3:#7E8C99;
  --rule:#212D38; --rule-strong:#33414E;
  --sodium:#F86605; --accent-ink:#F9873E; --peak-soft:rgba(248,102,5,.08);
  --todo:#F5B265; --todo-soft:rgba(180,83,9,.14);
  --sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--ground); color:var(--ink);
  font-family:var(--serif); font-size:17.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
a { color:var(--accent-ink); text-decoration-thickness:1px; text-underline-offset:2px; }
a:hover { color:var(--ink); }
:where(a,button):focus-visible { outline:2px solid var(--sodium); outline-offset:2px; border-radius:2px; }

.shell { max-width:76rem; margin:0 auto; padding:0 1.5rem; }
.measure { max-width:46rem; }

/* header */
.site-head { border-bottom:1px solid var(--rule); background:var(--surface); }
.site-head .shell { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:1.1rem; padding-bottom:1.1rem; }
.wordmark { display:flex; align-items:baseline; gap:.55rem; text-decoration:none; color:var(--ink); }
.wordmark .sela { font-family:var(--sans); font-weight:700; font-size:1.72rem; letter-spacing:.02em; }
.wordmark .photonics { font-family:var(--mono); font-size:.74rem; font-weight:500; letter-spacing:.32em; color:var(--ink-3); text-transform:uppercase; }
nav.site-nav { display:flex; gap:1.4rem; flex-wrap:wrap; }
nav.site-nav a { font-family:var(--sans); font-weight:600; font-size:.86rem; letter-spacing:.02em; text-decoration:none; color:var(--ink-2); padding:.2rem 0; border-bottom:2px solid transparent; }
nav.site-nav a:hover { color:var(--ink); }
nav.site-nav a[aria-current="page"] { color:var(--ink); border-bottom-color:var(--sodium); }

/* the narrow-linewidth motif */
.peakline { display:block; width:100%; height:auto; color:var(--rule-strong); }
.peakline .peak { stroke:var(--sodium); }

/* hero */
.hero { background:var(--surface); border-bottom:1px solid var(--rule); }
.hero .shell { padding-top:4.5rem; padding-bottom:4rem; display:flex; flex-direction:column; gap:1.4rem; }
.eyebrow { font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
h1 { font-family:var(--sans); font-weight:700; font-size:clamp(2.1rem,4.6vw,3.2rem); line-height:1.08; letter-spacing:-.02em; text-wrap:balance; max-width:52rem; }
.standfirst { font-size:1.18rem; color:var(--ink-2); max-width:44rem; text-wrap:pretty; }
.cta-row { display:flex; gap:.9rem; flex-wrap:wrap; margin-top:.4rem; }
.btn { font-family:var(--sans); font-weight:600; font-size:1rem; text-decoration:none; padding:.78rem 1.5rem; border-radius:5px; }
.btn.primary { background:var(--sodium); color:#0A0D10; }
.btn.primary:hover { background:#FF7F24; color:#0A0D10; }
.btn.ghost { color:var(--ink); border:1px solid var(--rule-strong); background:transparent; }
.btn.ghost:hover { border-color:var(--ink); }

/* sections */
main { display:block; }
section.band { padding:3.4rem 0; }
section.band.alt { background:var(--surface); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.band .shell { display:flex; flex-direction:column; gap:1.4rem; }
h2 { font-family:var(--sans); font-weight:600; font-size:1.55rem; letter-spacing:-.015em; text-wrap:balance; }
h3 { font-family:var(--sans); font-weight:600; font-size:1.05rem; letter-spacing:-.005em; }
p { text-wrap:pretty; }
.lede { font-size:1.14rem; color:var(--ink-2); line-height:1.55; }

/* cards */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width:760px){ .cards { grid-template-columns:1fr; } }
.card { background:var(--panel); border:1px solid var(--rule); border-radius:6px; padding:1.35rem 1.4rem; display:flex; flex-direction:column; gap:.6rem; }
section.band.alt .card { background:var(--panel); }
.card .k { font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink); }
.card p { font-size:1rem; color:var(--ink-2); line-height:1.55; }

/* figure */
figure.diagram { background:var(--panel); border:1px solid var(--rule); border-radius:6px; padding:1.6rem 1.4rem 1.1rem; overflow-x:auto; }
figure.diagram svg { width:100%; height:auto; color:var(--ink-2); min-width:560px; }
figcaption { font-size:.85rem; color:var(--ink-3); margin-top:.9rem; max-width:44rem; }

/* reading list */
.reading { border-left:3px solid var(--sodium); background:var(--peak-soft); border-radius:0 6px 6px 0; padding:1.2rem 1.4rem; display:flex; flex-direction:column; gap:.7rem; }
.reading .k { font-family:var(--mono); font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); }
.reading ol { padding-left:1.2rem; display:flex; flex-direction:column; gap:.45rem; font-size:.9rem; color:var(--ink-2); }

/* team */
.people { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.advisors { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width:760px){ .people,.advisors { grid-template-columns:1fr; } }
.person { background:var(--panel); border:1px solid var(--rule); border-radius:6px; padding:1.35rem 1.4rem; display:flex; flex-direction:column; gap:.55rem; }
.person .role { font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink); }
.person h3 { font-size:1.12rem; }
.person p { font-size:.93rem; color:var(--ink-2); }
.headshot { width:76px; height:76px; border-radius:50%; background:var(--panel); border:1px solid var(--rule); display:flex; align-items:center; justify-content:center; font-family:var(--sans); font-weight:600; color:var(--ink-3); font-size:1.15rem; }

/* placeholders */
.todo { border:1.5px dashed var(--todo); background:var(--todo-soft); border-radius:5px; padding:.75rem .95rem; font-size:.88rem; color:var(--todo); }
.todo .k { font-family:var(--mono); font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; display:block; margin-bottom:.25rem; }

/* contact */
.contact-block { display:flex; flex-direction:column; gap:.4rem; }
.contact-block .email { font-family:var(--mono); font-size:1.05rem; }

/* footer */
footer.site-foot { border-top:1px solid var(--rule); background:var(--surface); margin-top:3rem; }
footer.site-foot .shell { padding-top:1.6rem; padding-bottom:2.2rem; display:flex; flex-direction:column; gap:.8rem; }
.foot-row { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; align-items:baseline; }
.foot-row nav { display:flex; gap:1.1rem; flex-wrap:wrap; }
.foot-row nav a { font-family:var(--sans); font-size:.8rem; font-weight:600; text-decoration:none; color:var(--ink-3); }
.foot-row nav a:hover { color:var(--ink); }
.fineprint { font-size:.78rem; color:var(--ink-3); font-family:var(--mono); }
[data-ph] { color:var(--todo); background:var(--todo-soft); border-bottom:1.5px dashed var(--todo); padding:0 .15em; font-family:var(--mono); font-size:.92em; }
.portrait { width:138px; height:138px; border-radius:12px; object-fit:cover; border:1px solid var(--rule); display:block; }
.headshot { border-radius:10px; }
.bio.clamp { display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; }
.morebtn { font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  background:none; border:none; padding:0; cursor:pointer; color:var(--accent-ink); align-self:flex-start; }
.morebtn:hover { text-decoration:underline; }
.cardimg { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:6px; margin-bottom:.7rem; filter:saturate(.92) contrast(1.02) brightness(.94); }

/* ---------- dark peak divider ---------- */
.peakline { color:var(--rule-strong); }
/* ---------- evidence strip ---------- */
.evidence { border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); background:var(--surface); }
.evidence .shell { display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; padding-top:1.5rem; padding-bottom:1.5rem; }
@media (max-width:760px){ .evidence .shell { grid-template-columns:1fr; gap:1rem; } }
.ev { display:flex; flex-direction:column; gap:.35rem; }
.ev .evk { font-family:var(--mono); font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); }
.ev p { font-size:.98rem; color:var(--ink-2); line-height:1.5; }
.ev:not(:first-child) { padding-left:1.6rem; border-left:1px solid var(--rule); }
@media (max-width:760px){ .ev:not(:first-child){ padding-left:0; border-left:none; } }
/* ---------- split lower band ---------- */
.split { display:grid; grid-template-columns:1.35fr 1fr; gap:2.6rem; align-items:start; }
@media (max-width:820px){ .split { grid-template-columns:1fr; gap:1.6rem; } }
.split-main h2 { margin-bottom:.9rem; }
.split-aside { border-left:1px solid var(--rule); padding-left:2.2rem; }
@media (max-width:820px){ .split-aside { border-left:none; padding-left:0; padding-top:1.2rem; border-top:1px solid var(--rule); } }
.split-aside h3 { font-family:var(--sans); font-weight:600; font-size:1.05rem; margin-bottom:.6rem; }
.split-aside p { font-size:1rem; color:var(--ink-2); line-height:1.55; margin-bottom:.7rem; }
.split-main .lede { margin-bottom:.9rem; }
.arrowlink { font-family:var(--sans); font-weight:600; font-size:.95rem; text-decoration:none; color:var(--accent-ink); }
.arrowlink:hover { color:var(--ink); }
/* consistent portrait + card image grading */
.portrait { filter:saturate(.94) contrast(1.02); }

.logoimg { height:39px; width:auto; display:block; }
footer .logoimg { height:30px; }
.hero { position:relative; overflow:hidden; border-bottom:none; }
.hero .shell { position:relative; z-index:2; }
.tallpeak { position:absolute; right:5%; bottom:-1px; height:112%; width:auto; z-index:1; pointer-events:none; }
@media (max-width:860px){ .tallpeak { opacity:.28; } }
/* section-marker bar: label (left) --- rule --- styled A (right-justified) */
.secbar-shell { padding-top:0; padding-bottom:0; }
.secbar { display:flex; align-items:center; gap:1.25rem; height:70px; }
.seclabel { font-family:var(--mono); font-size:.82rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); white-space:nowrap; flex:0 0 auto; }
.secrule { flex:1 1 auto; height:1px; background:var(--rule); }
.secbar-a { height:32px; width:auto; flex:0 0 auto; display:block; }
footer.site-foot { background:#000; border-top-color:#1B242D; }
.person .todo { margin-top:auto; }
.rv { opacity:0; transform:translateY(22px); transition:opacity .65s cubic-bezier(.25,.1,.25,1), transform .65s cubic-bezier(.25,.1,.25,1); }
.rv.in { opacity:1; transform:none; }
.card, .person { transition:transform .25s ease, border-color .25s ease, opacity .65s ease; }
.card:hover, .person:hover { transform:translateY(-3px); border-color:var(--rule-strong); }
nav.site-nav a { transition:color .2s ease, border-bottom-color .25s ease; }
.btn { transition:background .2s ease, border-color .2s ease, transform .15s ease; }
.btn:active { transform:translateY(1px); }
@media (prefers-reduced-motion: reduce){ .rv{opacity:1;transform:none;transition:none} .card,.person,.btn{transition:none} .card:hover,.person:hover{transform:none} html{scroll-behavior:auto} }

/* --- sticky, compressing header --- */
.site-head { position:sticky; top:0; z-index:60; background:#000; border-bottom:1px solid #1B242D; transition:box-shadow .3s ease; }
.site-head .shell { padding-top:1.15rem; padding-bottom:1.15rem; transition:padding-top .32s cubic-bezier(.4,0,.2,1), padding-bottom .32s cubic-bezier(.4,0,.2,1); }
.site-head.scrolled .shell { padding-top:.6rem; padding-bottom:.6rem; }
.site-head.scrolled { box-shadow:0 8px 26px -14px rgba(0,0,0,.85); }
/* two-state brand: full logo (with tagline) on landing -> compact on scroll */
.brand { position:relative; display:block; height:80px; width:186px; flex:0 0 auto; overflow:hidden; transition:height .32s cubic-bezier(.4,0,.2,1), width .32s cubic-bezier(.4,0,.2,1); }
.brand-img { position:absolute; left:0; top:0; width:auto; display:block; transition:opacity .28s ease; }
.brand-full { height:80px; opacity:1; }
.brand-mini { height:44px; opacity:0; }
.site-head.scrolled .brand { height:44px; width:142px; }
.site-head.scrolled .brand-full { opacity:0; }
.site-head.scrolled .brand-mini { opacity:1; }
footer.site-foot .brand-mini-static { height:32px; width:auto; }
@media (max-width:560px){
  .brand { height:66px; width:153px; } .brand-full { height:66px; } .brand-mini { height:40px; }
  .site-head.scrolled .brand { height:40px; width:130px; }
  .site-head .shell { padding-top:.85rem; padding-bottom:.85rem; }
  nav.site-nav { gap:.95rem; }
  nav.site-nav a { font-size:.8rem; }
  .secbar { gap:.8rem; height:58px; }
  .seclabel { font-size:.74rem; letter-spacing:.16em; }
  .secbar-a { height:28px; }
}
/* advisory board: two confirmed members */
.advisors { grid-template-columns:repeat(2,1fr); }
@media (max-width:760px){ .advisors { grid-template-columns:1fr; } }
/* single-page section rhythm */
section.page { scroll-margin-top:64px; }
.page:not(#home) { border-top:1px solid var(--rule); }
.page:not(#home) .hero .shell { padding-top:1.4rem; padding-bottom:2.9rem; }
.secbar-shell { padding-top:2.4rem; }
#home .secbar-shell { padding-top:.6rem; }