:root{--ink:#0e1621;--paper:#f0f3f6;--card:#fff;--text:#14202d;--muted:#566574;--line:#d5dce3;--crimson:#a3162f;--sky:#d3e4f0;--serif:Charter,"Bitstream Charter","Sitka Text",Cambria,Georgia,serif;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#0a1119;--card:#111b27;--text:#e6edf3;--muted:#9aa9b7;--line:#25313f;--crimson:#ee6a80;--sky:#1b2b3b;color-scheme:dark}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);font:17px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
a{color:var(--crimson)}
a:focus-visible,button:focus-visible{outline:3px solid #7fb0e8;outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0}
.top{background:var(--ink);color:#fff}
nav{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0}
.logo{font:600 1.15rem var(--serif);color:#fff;text-decoration:none}
nav ul{display:flex;gap:26px;margin:0;padding:0;list-style:none;flex-wrap:wrap;justify-content:flex-end}
nav ul a{color:#c3cfdc;text-decoration:none;font-size:.95rem;padding-bottom:3px}
nav ul a:hover{color:#fff}
nav ul a[aria-current="page"]{color:#fff;border-bottom:2px solid #e0455f}
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero-text{position:relative;z-index:2;max-width:1100px;margin:0 auto;padding:56px 24px 88px;min-height:640px;display:flex;flex-direction:column;justify-content:center}
.hero-text>*{max-width:560px}
.hero h1{font-size:clamp(2.6rem,6vw,4.6rem);letter-spacing:-.015em}
.hero .role{font:1.2rem var(--serif);color:#9fc4e4;margin:16px 0 18px}
.hero .lead{font-size:1.15rem;color:#d3dce6;margin:0 0 30px}
.hero-photo{position:absolute;top:0;right:0;bottom:0;width:46%;z-index:1}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.hero-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 0,rgba(14,22,33,0) 38%),linear-gradient(0deg,rgba(14,22,33,.88) 0,rgba(14,22,33,0) 34%);z-index:1}
.hero-photo p{position:absolute;z-index:2;left:15%;right:24px;bottom:22px;margin:0;font-size:.92rem;color:#dfe7ef}
.btn{display:inline-block;padding:11px 22px;border-radius:4px;font-weight:600;text-decoration:none;border:1px solid #6c7d92;color:#fff;margin:0 10px 10px 0}
.btn.primary{background:var(--crimson);border-color:var(--crimson);color:#fff}
.btn:hover{filter:brightness(1.12)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.facts div{padding:30px 22px 30px 0;margin-right:22px;border-right:1px solid var(--line)}
.facts div:last-child{border-right:0;margin-right:0}
.facts b{display:block;font:600 1.9rem var(--serif)}
.facts span{color:var(--muted);font-size:.92rem;line-height:1.4;display:block;margin-top:4px}
.story{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:84px 0}
.story.rev>:first-child{order:2}
.story h2,.band h2{font-size:clamp(1.8rem,3.4vw,2.5rem);margin-bottom:18px}
.story p{max-width:56ch;margin:0 0 14px}
.story+.story{border-top:1px solid var(--line)}
.link{font-weight:600;text-decoration:none}
.link:hover{text-decoration:underline}
figure{margin:0}
figure img{display:block;width:100%;object-fit:cover;border-radius:6px}
figcaption{font-size:.88rem;color:var(--muted);margin-top:8px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.duo figure:last-child{margin-top:48px}
.duo img{aspect-ratio:3/4.1}
.single img{aspect-ratio:1/1;object-position:50% 40%}
.wide img{aspect-ratio:4/3}
.quote{margin:24px 0 0;padding:22px 26px;background:var(--ink);color:#fff;border-left:4px solid var(--crimson);border-radius:4px}
.quote p{font:italic 1.2rem/1.5 var(--serif);margin:0 0 8px;max-width:none}
.quote cite{font-style:normal;font-size:.88rem;color:#aab9c9}
.domains{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-bottom:84px}
.domain{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--crimson);border-radius:4px;padding:22px}
.domain h3{font-size:1.15rem;margin-bottom:8px}
.domain p{margin:0;color:var(--muted);font-size:.95rem}
.sect-title{font-size:clamp(1.6rem,3vw,2.1rem);padding:64px 0 24px}
.band{background:var(--ink);color:#fff;padding:72px 0}
.band p{color:#c5d1de;max-width:56ch;margin:0 0 24px}
.pagehead{background:var(--ink);color:#fff;padding:40px 0 56px}
.pagehead h1{font-size:clamp(2.1rem,4.6vw,3.2rem);margin-bottom:10px}
.pagehead p{margin:0;color:#c3cfdc;max-width:58ch;font-size:1.1rem}
.timeline{padding:56px 0 24px}
.tl{display:grid;grid-template-columns:200px 1fr;gap:6px 36px;padding:26px 0;border-top:1px solid var(--line)}
.tl:first-child{border-top:0}
.when{font:1.15rem var(--serif);color:var(--crimson)}
.tl h3{font-size:1.3rem}
.org{color:var(--muted);margin:2px 0 10px}
.tl ul{margin:0;padding-left:20px}
.tl li{margin:4px 0;max-width:70ch}
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:40px 0 84px}
.two h2{font-size:1.6rem;margin-bottom:12px}
.item{padding:14px 0;border-top:1px solid var(--line)}
.item b{display:block}
.item span{color:var(--muted);font-size:.93rem}
.proj{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:44px 0;border-top:1px solid var(--line)}
.proj:first-child{border-top:0}
.proj:nth-child(even)>img{order:2}
.proj img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.proj h2{font-size:1.7rem;margin-bottom:8px}
.proj ul{padding-left:20px;margin:12px 0}
.gal{columns:3;column-gap:18px;padding:56px 0 84px}
.gal figure{break-inside:avoid;margin:0 0 18px}
.gal button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.gal img{width:100%;height:auto;border-radius:6px}
dialog{border:0;padding:0;background:transparent;max-width:min(92vw,900px);max-height:92vh;color:#fff}
dialog::backdrop{background:rgba(6,10,16,.88)}
dialog img{display:block;max-width:100%;max-height:80vh;margin:0 auto;border-radius:6px}
dialog p{text-align:center;margin:12px 0}
dialog button{display:block;margin:0 auto;padding:8px 20px;border-radius:4px;border:1px solid #6c7d92;background:none;color:#fff;cursor:pointer;font:inherit}
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;padding:72px 0 90px}
.contact h2{font-size:2.2rem;margin-bottom:16px}
.contact p{max-width:52ch}
.contact img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;border-radius:6px}
footer{border-top:1px solid var(--line);padding:26px 0 40px;color:var(--muted);font-size:.88rem}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
footer a{color:var(--muted)}
.story>*,.proj>*,.contact>*,.two>*,.duo>*,.facts>*,.domains>*{min-width:0}
@media (max-width:860px){
  .hero-text{min-height:0;padding:40px 24px 28px}
  .hero-photo{position:relative;width:100%;height:520px}
  .hero-photo::before{background:linear-gradient(0deg,rgba(14,22,33,.9) 0,rgba(14,22,33,0) 40%),linear-gradient(180deg,var(--ink) 0,rgba(14,22,33,0) 14%)}
  .hero-photo p{left:24px}
  .facts{grid-template-columns:1fr 1fr}
  .facts div{border-right:0;margin-right:0;border-top:1px solid var(--line)}
  .story,.story.rev,.proj,.contact,.two{grid-template-columns:minmax(0,1fr);gap:32px}
  .story.rev>:first-child{order:0}
  .proj:nth-child(even)>img{order:0}
  .domains{grid-template-columns:1fr 1fr}
  .tl{grid-template-columns:1fr}
  .gal{columns:2}
}
@media (max-width:520px){.domains{grid-template-columns:1fr}.gal{columns:1}.duo figure:last-child{margin-top:24px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}