
:root{
  --navy:#0d2a44;
  --navy2:#071a2a;
  --cobalt:#164f7a;
  --copper:#bd6844;
  --ivory:#f1eee6;
  --paper:#e7e3da;
  --ink:#13202a;
  --muted:#63717a;
  --line:rgba(19,32,42,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:"Inter",sans-serif;overflow-x:hidden}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button{font:inherit}

.site-header{
  height:86px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 3vw;border-bottom:1px solid var(--line);background:rgba(241,238,230,.97);
  position:relative;z-index:50
}
.brand img{width:196px;height:auto}
.edition{display:flex;gap:1.5rem;font:500 .62rem "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.13em;color:#65717a}
.desktop-nav{justify-self:end;display:flex;gap:1.8rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.14em}
.desktop-nav a:hover{color:var(--copper)}
.menu-toggle{display:none;border:0;background:none;padding:10px}
.menu-toggle span{display:block;width:28px;height:1px;background:var(--ink);margin:7px 0}

.hero{height:calc(100vh - 86px);min-height:720px;display:grid;grid-template-columns:1.35fr .65fr;position:relative;background:var(--navy)}
.hero-photo{grid-column:1/2;overflow:hidden}
.hero-photo img{filter:saturate(.78) contrast(1.04)}
.hero-panel{
  background:var(--navy);color:white;padding:5vw 4.5vw;display:flex;flex-direction:column;justify-content:center;position:relative
}
.molecule-mark{position:absolute;top:2.4vw;right:3vw;font:500 1rem "IBM Plex Mono",monospace;border:1px solid rgba(255,255,255,.35);width:54px;height:54px;display:grid;place-items:center}
.molecule-mark sup{font-size:.45em}
.eyebrow,.kicker,.label{font:500 .65rem "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.16em}
.hero .eyebrow{color:#b8cedb;max-width:300px;line-height:1.7}
.hero h1{
  font:400 clamp(4rem,6.4vw,7.4rem)/.87 "Libre Caslon Display",serif;
  letter-spacing:-.04em;margin:1.3rem 0 2.4rem
}
.hero h1 em{color:#e39b78;font-style:normal}
.hero-meta{display:grid;grid-template-columns:1fr 1fr;gap:1rem;border-top:1px solid rgba(255,255,255,.23);padding-top:1.2rem}
.hero-meta span{display:block;font:400 .58rem "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.15em;color:#90a9b9;margin-bottom:.35rem}
.hero-meta strong{font-size:.78rem;font-weight:500}
.hero-bottom{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;padding:1rem 3vw;background:rgba(5,18,29,.8);color:white;font:500 .61rem "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.14em}

.overview{display:grid;grid-template-columns:.35fr 1.4fr .8fr;gap:5vw;padding:10vw 6vw;border-bottom:1px solid var(--line)}
.rail{display:flex;gap:1rem;align-items:flex-start}
.rail>span,.rail-number{display:grid;place-items:center;width:34px;height:34px;border:1px solid currentColor;border-radius:50%;font:500 .62rem "IBM Plex Mono",monospace}
.rail p{margin:0;font:500 .62rem "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.14em;line-height:1.6}
.overview-main h2,.canvas-head h2,.programme h2,.agra-card h2,.bridge-title h2,.archive-intro h2,.legacy-copy h2{
  font:400 clamp(3rem,5.4vw,6.1rem)/.93 "Libre Caslon Display",serif;letter-spacing:-.035em;margin:.9rem 0 0
}
.overview-note>p{line-height:1.9;color:#55646d;margin:0 0 3rem}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.stat-grid div{padding:1.1rem .8rem 0 0}
.stat-grid strong{display:block;font:400 1.7rem "Libre Caslon Display",serif}
.stat-grid span{font-size:.62rem;text-transform:uppercase;letter-spacing:.12em;color:#78838a}

.research-canvas{padding:9vw 5vw;background:#d9e0e3}
.canvas-head{display:grid;grid-template-columns:.4fr 1.4fr;gap:4vw;align-items:start;margin-bottom:4vw}
.theme-grid{display:grid;grid-template-columns:1fr 1.25fr .8fr;grid-template-rows:430px 390px;gap:1px;background:rgba(13,42,68,.14)}
.theme-card{padding:3.4vw;display:flex;flex-direction:column;justify-content:space-between}
.theme-card h3{font:400 clamp(2.4rem,3.8vw,4rem)/1 "Libre Caslon Display",serif;margin:auto 0 1rem}
.theme-card p{font-size:.86rem;line-height:1.75;max-width:360px}
.theme-index{font:500 .62rem "IBM Plex Mono",monospace;letter-spacing:.14em}
.cobalt{background:var(--cobalt);color:white}
.ivory{background:var(--ivory)}
.copper{background:var(--copper);color:white}
.photo-card{padding:0}
.photo-card.tall{grid-column:2/4}
.photo-card img{height:100%}

.programme{padding:10vw 6vw;background:var(--ivory)}
.programme-head{display:grid;grid-template-columns:.55fr 1.45fr;gap:5vw;margin-bottom:5vw}
.timeline{margin-left:27%;border-top:1px solid var(--ink)}
.timeline article{display:grid;grid-template-columns:.35fr 1fr;gap:4vw;padding:2rem 0;border-bottom:1px solid var(--line)}
.timeline article>span{font:500 .68rem "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.13em;color:var(--copper)}
.timeline h3{font:400 clamp(1.8rem,2.5vw,2.8rem)/1.1 "Libre Caslon Display",serif;margin:0 0 .6rem}
.timeline p{margin:0;line-height:1.7;color:#657078}

.agra{display:grid;grid-template-columns:1.5fr .5fr;min-height:740px;background:var(--navy2)}
.agra-image{min-height:740px}
.agra-card{color:white;padding:6vw 4vw;display:flex;flex-direction:column;justify-content:center}
.agra-card .label{color:#c9a08f}
.agra-card h2{font-size:clamp(3rem,4.8vw,5.4rem);margin:1rem 0 2rem}
.agra-card p{line-height:1.85;color:#b8c2c8}
.coord{font:500 .61rem "IBM Plex Mono",monospace;letter-spacing:.13em;color:#78909d;margin-top:2rem}

.editorial-bridge{padding:10vw 6vw;display:grid;grid-template-columns:1.2fr .7fr .7fr;gap:2vw;background:#efeae1}
.bridge-title{padding-right:4vw}
.bridge-title h2{font-size:clamp(3.5rem,5vw,5.8rem)}
.zeus-note,.digital-note{padding:3vw;min-height:430px;display:flex;flex-direction:column;justify-content:flex-end}
.zeus-note{background:var(--copper);color:white}
.digital-note{background:var(--navy);color:white;margin-top:8vw}
.zeus-note>span,.digital-note>span{margin-bottom:auto;font:500 .61rem "IBM Plex Mono",monospace;letter-spacing:.14em;color:rgba(255,255,255,.68)}
.zeus-note h3,.digital-note h3{font:400 2.1rem/1.07 "Libre Caslon Display",serif;margin:1rem 0}
.zeus-note p,.digital-note p{font-size:.82rem;line-height:1.75;color:rgba(255,255,255,.76)}

.archive{padding:10vw 5vw;background:white}
.archive-intro{display:grid;grid-template-columns:.25fr 1.5fr;gap:3vw;margin-bottom:5vw}
.archive-gallery{display:grid;grid-template-columns:1.35fr .72fr .72fr;gap:1.5vw;align-items:end}
.archive-gallery figure{margin:0}
.archive-gallery img{height:100%;transition:transform .6s ease}
.archive-gallery figure{overflow:hidden}
.archive-gallery figure:hover img{transform:scale(1.02)}
.g1{height:680px}.g2{height:470px}.g3{height:560px}
.archive-gallery figcaption{font:500 .61rem "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.13em;margin-top:.7rem;color:#6d777d}

.legacy{padding:8vw 6vw;background:var(--paper);display:grid;grid-template-columns:.8fr 1.2fr;align-items:center}
.legacy-number{font:400 clamp(10rem,22vw,24rem)/.7 "Libre Caslon Display",serif;color:#c0b7ab;letter-spacing:-.08em}
.legacy-copy{max-width:760px}
.legacy-copy p:last-child{line-height:1.9;color:#59656d;max-width:650px}

footer{background:#07131d;color:white;padding:5vw 6vw;display:grid;grid-template-columns:1.2fr 1fr .7fr;gap:5vw}
footer>img{width:240px;height:auto}
.footer-meta{font-size:.72rem;color:#8798a4;line-height:1.75}
.footer-links{display:flex;flex-direction:column;gap:.6rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em}
.copyright{grid-column:1/-1;border-top:1px solid #263642;padding-top:1.5rem;color:#586b78;font:500 .6rem "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.13em}
.mobile-nav{display:none}

@media(max-width:980px){
  .site-header{grid-template-columns:1fr auto}.edition,.desktop-nav{display:none}.menu-toggle{display:block}
  .hero{grid-template-columns:1fr 1fr}
  .overview{grid-template-columns:.35fr 1fr}.overview-note{grid-column:2}
  .theme-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}.photo-card.tall{grid-column:1/-1;height:400px}.theme-card{min-height:390px}
  .programme-head{grid-template-columns:.4fr 1fr}.timeline{margin-left:18%}
  .agra{grid-template-columns:1.2fr .8fr}
  .editorial-bridge{grid-template-columns:1fr 1fr}.bridge-title{grid-column:1/-1;max-width:850px}.digital-note{margin-top:0}
  .archive-gallery{grid-template-columns:1fr 1fr}.g1{grid-column:1/-1;height:600px}
  .legacy{grid-template-columns:.6fr 1.4fr}
  .mobile-nav{display:flex;position:fixed;inset:86px 0 0;background:var(--ivory);z-index:40;flex-direction:column;padding:8vw;transform:translateX(100%);transition:.35s}
  .mobile-nav.open{transform:none}
  .mobile-nav a{font:400 3.2rem/1.45 "Libre Caslon Display",serif;border-bottom:1px solid var(--line)}
}
@media(max-width:680px){
  .site-header{height:72px;padding:0 5vw}.brand img{width:165px}.mobile-nav{inset:72px 0 0}
  .hero{height:auto;min-height:0;grid-template-columns:1fr}.hero-photo{height:430px}.hero-panel{padding:15vw 7vw 18vw;min-height:560px}.molecule-mark{top:7vw;right:7vw}.hero-bottom{display:none}
  .hero h1{font-size:4.4rem}
  .overview{grid-template-columns:auto 1fr;padding:18vw 6vw}.overview-main,.overview-note{grid-column:1/-1}.stat-grid{grid-template-columns:1fr}
  .canvas-head{grid-template-columns:1fr;padding-right:0}.research-canvas{padding:18vw 6vw}
  .theme-grid{grid-template-columns:1fr}.theme-card,.photo-card.tall{grid-column:auto;min-height:410px;height:auto}
  .photo-card{height:470px}.photo-card.tall{height:470px}
  .programme{padding:18vw 6vw}.programme-head{grid-template-columns:1fr}.rail.small{margin-bottom:2rem}.timeline{margin-left:0}
  .timeline article{grid-template-columns:1fr;gap:1rem}
  .agra{grid-template-columns:1fr}.agra-image{min-height:480px}.agra-card{padding:18vw 7vw}
  .editorial-bridge{grid-template-columns:1fr;padding:18vw 6vw}.bridge-title{grid-column:auto}.zeus-note,.digital-note{min-height:390px;padding:9vw 7vw}
  .archive{padding:18vw 6vw}.archive-intro{grid-template-columns:auto 1fr}.archive-intro div{grid-column:1/-1}
  .archive-gallery{grid-template-columns:1fr;gap:10vw}.g1,.g2,.g3{grid-column:auto;height:480px}
  .legacy{grid-template-columns:1fr;padding:18vw 6vw}.legacy-number{font-size:12rem;margin-bottom:2rem}
  footer{grid-template-columns:1fr;padding:14vw 6vw}.copyright{grid-column:1}
}
