:root {
  --ink: #192c46;
  --ink-deep: #101f33;
  --saffron: #d49a32;
  --paper: #f4f0e7;
  --paper-light: #fbf9f4;
  --mist: #a9b7c5;
  --charcoal: #272a2e;
  --line: rgba(25, 44, 70, 0.18);
  --serif: "Newsreader", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --shell: min(1180px, calc(100% - 48px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--charcoal); background: var(--paper); font-family: var(--sans); line-height: 1.6; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.section-shell { width: var(--shell); margin-inline: auto; }
.section { padding-block: 112px; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--saffron); color: var(--ink-deep); font-weight: 700; }
.skip-link:focus { top: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.site-header { width: min(1280px, calc(100% - 48px)); height: 90px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.brand-group { display: flex; align-items: center; gap: 18px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand-name { font-size: 1.06rem; font-weight: 700; letter-spacing: .08em; }
.brand-name strong { color: var(--saffron); }
.brand-mark { width: 33px; height: 33px; position: relative; display: block; }
.brand-mark span { position: absolute; border: 1.5px solid var(--ink); border-radius: 50%; }
.brand-mark span:nth-child(1) { inset: 1px 9px; }
.brand-mark span:nth-child(2) { inset: 9px 1px; }
.brand-mark span:nth-child(3) { width: 7px; height: 7px; left: 13px; top: 13px; background: var(--saffron); border-color: var(--saffron); }
.up-brand { display: inline-flex; align-items: center; padding-left: 18px; border-left: 1px solid var(--line); }
.up-brand img { display: block; width: 48px; height: 48px; object-fit: contain; }
.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
.site-nav a { font-size: .84rem; font-weight: 600; text-decoration: none; color: var(--ink); }
.site-nav a:not(.nav-contact):hover { color: var(--saffron); }
.nav-contact { padding: 9px 16px; border: 1px solid var(--ink); }
.nav-contact:hover { background: var(--ink); color: var(--paper); }
.menu-toggle { display: none; background: none; border: 0; padding: 10px; }
.menu-toggle > span:not(.sr-only) { display: block; width: 24px; height: 1px; margin: 6px; background: var(--ink); }

.hero { min-height: 710px; padding-block: 105px 70px; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, .8fr); grid-template-rows: 1fr; column-gap: 80px; position: relative; }
.hero-copy { grid-column: 1; grid-row: 1; align-self: center; max-width: 760px; }
.eyebrow { margin: 0 0 22px; color: var(--ink); font-size: .86rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, h3 { margin-top: 0; color: var(--ink); }
h1, h2 { font-family: var(--serif); font-weight: 500; line-height: .99; letter-spacing: -.035em; }
h1 { max-width: 800px; margin-bottom: 30px; font-size: clamp(3.6rem, 6.5vw, 6.4rem); }
h2 { margin-bottom: 0; font-size: clamp(2.7rem, 5vw, 4.8rem); }
h3 { line-height: 1.2; }
.hero-intro { max-width: 680px; margin: 0; font-size: clamp(1.06rem, 1.5vw, 1.26rem); color: #47515c; }
.hero-actions { display: flex; gap: 28px; align-items: center; margin-top: 42px; }
.button { display: inline-flex; padding: 13px 20px; text-decoration: none; font-size: .88rem; font-weight: 700; }
.button-primary { background: var(--ink); color: var(--paper-light); }
.button-primary:hover { background: var(--saffron); color: var(--ink-deep); }
.text-link { display: inline-flex; gap: 12px; text-underline-offset: 5px; font-size: .9rem; font-weight: 700; }
.text-link span { color: var(--saffron); }

.field-figure { grid-column: 2; grid-row: 1; align-self: center; min-height: 430px; border: 1px solid var(--line); background: rgba(255,255,255,.14); position: relative; display: grid; grid-template-rows: auto 1fr auto; padding: 20px; }
.figure-label { font-size: .68rem; color: #657382; text-transform: uppercase; letter-spacing: .12em; }
.field-figure > p { margin: 0; color: var(--ink); font-size: .7rem; text-align: right; letter-spacing: .1em; text-transform: uppercase; }
.specimen { position: relative; margin: 26px; }
.orbit { position: absolute; left: 50%; top: 50%; border: 1px solid var(--mist); border-radius: 50%; transform: translate(-50%, -50%) rotate(-15deg); }
.orbit-one { width: 88%; height: 48%; }
.orbit-two { width: 55%; height: 92%; transform: translate(-50%, -50%) rotate(42deg); }
.core { position: absolute; width: 88px; height: 88px; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 48% 52% 42% 58%; background: var(--ink); box-shadow: 17px -10px 0 -2px var(--mist), -13px 18px 0 -5px var(--saffron); }
.node { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--saffron); }
.node-a { left: 10%; top: 44%; }.node-b { right: 14%; top: 25%; }.node-c { right: 25%; bottom: 8%; background: var(--ink); }
.trace { position: absolute; height: 1px; background: var(--mist); transform-origin: left; }
.trace-a { width: 28%; left: 16%; top: 34%; transform: rotate(22deg); }.trace-b { width: 25%; right: 11%; bottom: 29%; transform: rotate(-30deg); }
.hero-note { grid-column: 1; grid-row: 2; position: static; display: flex; gap: 14px; max-width: 390px; margin: 0; border-left: 2px solid var(--saffron); padding-left: 16px; }
.hero-note span { color: var(--saffron); font-size: .86rem; font-weight: 700; }
.hero-note p { margin: 0; font-family: var(--serif); color: var(--ink); font-size: 1rem; line-height: 1.35; }

.project-strip { background: var(--ink); color: var(--paper-light); }
.strip-grid { min-height: 112px; display: grid; grid-template-columns: .65fr repeat(3, 1fr); align-items: stretch; }
.strip-grid > * { display: flex; align-items: center; padding: 22px; border-left: 1px solid rgba(255,255,255,.16); }
.strip-grid > *:last-child { border-right: 1px solid rgba(255,255,255,.16); }
.strip-title { margin: 0; color: var(--mist); font-size: .82rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.strip-grid a { gap: 12px; text-decoration: none; font-family: var(--serif); font-size: 1.08rem; line-height: 1.2; }
.strip-grid a:hover { background: rgba(255,255,255,.06); }
.strip-grid a span { color: var(--saffron); font: 700 .82rem var(--sans); }

.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 65px 95px; }
.about-copy .lead { margin-top: 0; color: var(--ink); font-family: var(--serif); font-size: 1.7rem; line-height: 1.35; }
.about-copy p:last-child { color: #52606c; }
.research-areas { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.research-areas article { min-height: 245px; padding: 30px 26px 24px; border: 1px solid rgba(25, 44, 70, .12); background: var(--paper-light); box-shadow: 0 12px 30px rgba(16, 31, 51, .07); }
.research-areas span, .project-number { color: var(--saffron); font-size: .9rem; font-weight: 700; }
.research-areas h3 { margin: 42px 0 12px; font-family: var(--serif); font-size: 1.4rem; font-weight: 600; }
.research-areas p { margin: 0; color: #62707d; font-size: .88rem; line-height: 1.45; }
.research-objectives { grid-column: 1 / -1; display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; padding-top: 70px; border-top: 1px solid var(--line); }
.research-objectives-heading h3 { margin-bottom: 18px; font: 600 2.2rem var(--serif); }
.research-objectives-heading > p:last-child { color: #62707d; }
.research-principles { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.research-principles li { display: grid; grid-template-columns: 42px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.research-principles li > span { padding-top: 4px; color: var(--saffron); font-size: .88rem; font-weight: 700; }
.research-principles strong { color: var(--ink); font: 600 1.35rem var(--serif); }
.research-principles p { margin: 4px 0 0; color: #62707d; font-size: .9rem; }

.projects-section { background: var(--paper-light); border-block: 1px solid var(--line); }
.heading-row { display: grid; grid-template-columns: 1.4fr .6fr; gap: 70px; align-items: end; margin-bottom: 72px; }
.heading-row > p { margin: 0; color: #62707d; }
.projects-list { border-top: 1px solid var(--line); }
.project-card { display: grid; grid-template-columns: 80px 1fr 220px; gap: 30px; min-height: 300px; padding: 38px 0; border-bottom: 1px solid var(--line); }
.project-content { max-width: 690px; }
.project-tag { margin: 0 0 15px; color: #6a7784; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.project-content h3 { margin-bottom: 14px; font-family: var(--serif); font-size: 2rem; font-weight: 600; }
.project-content > p { color: #53606c; }
.project-content ul { display: flex; gap: 8px; flex-wrap: wrap; margin: 24px 0 0; padding: 0; list-style: none; }
.project-content li { padding: 6px 10px; border: 1px solid var(--mist); color: var(--ink); font-size: .7rem; font-weight: 600; }
.project-glyph { align-self: center; justify-self: end; width: 180px; height: 180px; position: relative; }
.glyph-cards span { position: absolute; width: 75px; height: 110px; border: 1px solid var(--ink); background: var(--paper-light); }
.glyph-cards span:nth-child(1){left:25px;top:35px;transform:rotate(-16deg)}.glyph-cards span:nth-child(2){left:55px;top:24px;transform:rotate(3deg)}.glyph-cards span:nth-child(3){left:82px;top:40px;transform:rotate(18deg);border-color:var(--saffron)}
.glyph-nodes span { position:absolute; width:20px;height:20px;border:1px solid var(--ink);border-radius:50%; }
.glyph-nodes span:nth-child(1){left:22px;top:80px}.glyph-nodes span:nth-child(2){left:76px;top:30px;background:var(--saffron);border-color:var(--saffron)}.glyph-nodes span:nth-child(3){right:18px;top:86px}.glyph-nodes span:nth-child(4){left:78px;bottom:20px}
.glyph-nodes:before,.glyph-nodes:after{content:"";position:absolute;left:34px;top:88px;width:105px;height:1px;background:var(--mist);transform:rotate(-22deg)}.glyph-nodes:after{transform:rotate(25deg)}
.glyph-rings span { position:absolute;inset:20px;border:1px solid var(--mist);border-radius:50%; }.glyph-rings span:nth-child(2){inset:45px;border-color:var(--ink)}.glyph-rings span:nth-child(3){inset:73px;background:var(--saffron);border-color:var(--saffron)}

.people-section .section-heading { max-width: 700px; margin-bottom: 55px; }
.people-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; }
.person-card, .join-card { min-height: 330px; border: 1px solid var(--line); padding: 30px; }
.person-lead { display: grid; grid-template-columns: 220px 1fr; gap: 35px; align-items: center; }
.portrait-placeholder { height: 265px; display: grid; place-items: center; background: var(--ink); color: var(--saffron); font: 500 3.6rem var(--serif); }
.role { color: var(--saffron); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.person-card h3, .join-card h3 { font-family: var(--serif); font-size: 1.8rem; font-weight: 600; }
.person-card p:last-child, .join-card > p { color: #61707c; }
.join-card { display: flex; flex-direction: column; justify-content: center; background: var(--mist); }
.join-card .text-link { margin-top: 20px; }

.resources-section { background: var(--ink); color: var(--paper-light); }
.resources-section h2, .resources-section h3, .resources-section .eyebrow { color: var(--paper-light); }
.resources-section .heading-row > p { color: var(--mist); }
.resource-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.resource-item { min-height: 265px; padding: 28px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.035); box-shadow: 0 14px 32px rgba(0,0,0,.12); }
.resource-item > span { color: var(--saffron); font-size: .9rem; font-weight: 700; }
.resource-item h3 { margin: 48px 0 8px; font-family: var(--serif); font-size: 1.55rem; }
.resource-item p { color: var(--mist); font-size: .87rem; }
.resource-item em, .resource-item a { display: inline-block; margin-top: 25px; color: var(--saffron); font-size: .72rem; font-style: normal; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.news-section .section-heading { margin-bottom: 48px; }
.news-feature { display: grid; grid-template-columns: 100px 1fr 70px; gap: 32px; align-items: center; padding: 34px 0; border-block: 1px solid var(--line); }
.news-date { border-right: 1px solid var(--line); }
.news-date span, .news-date strong { display: block; }.news-date span { color:#687684;font-size:.7rem }.news-date strong { color:var(--saffron);font:500 1.8rem var(--serif) }
.news-feature h3 { margin-bottom: 8px; font: 600 1.8rem var(--serif); }.news-feature p:last-child { margin:0;color:#5c6873 }.news-mark { justify-self:end;color:var(--saffron);font-size:2rem }

.contact-section { padding-block: 110px; background: var(--mist); }
.contact-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 100px; }
.contact-details { border-top: 1px solid rgba(25,44,70,.35); }
.contact-details > div { display: grid; grid-template-columns: 105px 1fr; padding: 18px 0; border-bottom: 1px solid rgba(25,44,70,.35); }
.contact-details span { color: var(--ink); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.contact-details p { margin: 0; }
.site-footer { background: var(--ink-deep); color: var(--mist); padding-block: 48px; font-size: .8rem; }
.footer-grid { display:grid;grid-template-columns:1.3fr 1fr auto;gap:40px;align-items:end }.footer-grid strong{color:var(--paper-light);letter-spacing:.08em}.footer-grid p{margin:8px 0 0}.footer-grid a{color:var(--paper-light)}

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto } .reveal { opacity:1; transform:none; transition:none } }

@media (max-width: 960px) {
  :root { --shell: min(100% - 36px, 760px); }
  .site-header { width: calc(100% - 36px); }
  .menu-toggle { display: block; }
  .site-nav { display:none; position:absolute; left:0; right:0; top:89px; padding:25px; flex-direction:column;align-items:flex-start;background:var(--paper-light);border-bottom:1px solid var(--line);box-shadow:0 15px 30px rgba(16,31,51,.08) }
  .site-nav.open { display:flex }.site-nav a{font-size:1rem}.nav-contact{width:100%;text-align:center}
  .hero { grid-template-columns:1fr; grid-template-rows:auto; gap:55px; padding-block:75px; }.hero-copy,.field-figure,.hero-note{grid-column:1;grid-row:auto}.field-figure{min-height:360px}.hero-note{margin-top:0}
  .strip-grid { grid-template-columns:1fr; }.strip-grid > * { min-height:70px;border-right:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16) }
  .about-grid, .heading-row, .contact-grid { grid-template-columns:1fr; }.research-areas { grid-template-columns:1fr 1fr }
  .research-objectives { grid-template-columns: 1fr; gap: 35px; }
  .project-card { grid-template-columns:50px 1fr }.project-glyph{display:none}
  .people-grid { grid-template-columns:1fr }.resource-grid{grid-template-columns:1fr 1fr}
}

@media (max-width: 600px) {
  :root { --shell: calc(100% - 28px); }.section{padding-block:78px}.site-header{width:calc(100% - 28px);height:74px}.site-nav{top:73px}
  .brand-group { gap: 10px; }.up-brand { padding-left: 10px; }.up-brand img { width: 38px; height: 38px; }
  h1{font-size:clamp(3rem,14vw,4.2rem)}h2{font-size:2.65rem}.hero{padding-top:55px}.hero-actions{align-items:flex-start;flex-direction:column;gap:20px}.field-figure{min-height:310px}.specimen{margin:12px}
  .about-grid{gap:40px}.research-areas{grid-template-columns:1fr}
  .heading-row{gap:25px;margin-bottom:48px}.project-card{grid-template-columns:34px 1fr;gap:10px}.project-content ul{gap:5px}
  .person-lead{grid-template-columns:1fr}.portrait-placeholder{height:220px}.resource-grid{grid-template-columns:1fr}
  .news-feature{grid-template-columns:65px 1fr;gap:15px}.news-mark{display:none}.contact-grid{gap:50px}.contact-details>div{grid-template-columns:1fr;gap:8px}.footer-grid{grid-template-columns:1fr;gap:25px;align-items:start}
}