:root {
      --navy: #06285a;
      --navy-deep: #031a3d;
      --blue: #0b57c7;
      --blue-bright: #2678ef;
      --sky: #dcecff;
      --gold: #b9ddff;
      --paper: #eff6fd;
      --white: #ffffff;
      --ink: #0d2b50;
      --muted: #526a84;
      --line: #cbdcf0;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 110px; }
    body { margin: 0; background: var(--white); color: var(--ink); font-family: Arial, Helvetica, sans-serif; font-size: 17px; line-height: 1.65; }
    a { color: inherit; }
    a:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
    .wrap { width: min(1200px, calc(100% - 80px)); margin: 0 auto; }
    .skip { position: absolute; top: -80px; left: 15px; z-index: 30; background: var(--gold); color: var(--navy-deep); padding: 12px 16px; }
    .skip:focus { top: 12px; }

    header { position: sticky; top: 0; z-index: 20; color: var(--white); background: rgba(3, 26, 61, .96); border-bottom: 1px solid rgba(255,255,255,.15); backdrop-filter: blur(14px); }
    header .wrap { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
    .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-size: 20px; font-weight: 800; letter-spacing: .04em; line-height: 1.05; }
    .brand-mark { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(255,211,106,.6); color: var(--gold); font: 29px Georgia, serif; }
    .brand small { display: block; margin-top: 8px; color: #bcd4ed; font-size: 11px; font-weight: 400; letter-spacing: .15em; }
    nav { display: flex; gap: 25px; font-size: 14px; white-space: nowrap; }
    nav a { text-decoration: none; }
    nav a:hover, .nav-contact { color: var(--gold); }

    .hero { position: relative; overflow: hidden; color: var(--white); background: radial-gradient(circle at 85% 25%, rgba(38,120,239,.42), transparent 31%), radial-gradient(circle at 18% 90%, rgba(11,87,199,.33), transparent 28%), linear-gradient(125deg, var(--navy-deep) 0%, var(--navy) 55%, #0745a0 100%); }
    .hero::after { content: ""; position: absolute; inset: 0; opacity: .17; background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px); background-size: 70px 70px; mask-image: linear-gradient(to left, black, transparent 75%); pointer-events: none; }
    .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr .9fr; align-items: center; gap: 70px; padding-top: 86px; padding-bottom: 92px; }
    .eyebrow { display: block; margin-bottom: 22px; color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
    .hero .eyebrow, .blue-section .eyebrow { color: var(--gold); }
    h1, h2 { margin-top: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.04em; }
    h1 { margin-bottom: 25px; font-size: clamp(47px, 5.5vw, 76px); line-height: 1.06; }
    h1 em { color: var(--gold); font-weight: 400; }
    h2 { margin-bottom: 24px; font-size: clamp(37px, 4vw, 49px); line-height: 1.13; }
    h3 { margin: 0 0 15px; font-size: 21px; line-height: 1.28; letter-spacing: -.02em; }
    p { margin: 0 0 22px; }
    .hero-copy { max-width: 670px; color: #d7e6f7; font-size: 19px; }
    .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
    .button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; padding: 14px 23px; border: 1px solid var(--gold); background: var(--gold); color: var(--navy-deep); font-size: 14px; font-weight: 800; text-decoration: none; transition: transform .2s, background .2s; }
    .button:hover { background: #ffe39b; transform: translateY(-2px); }
    .button.secondary { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); color: var(--white); }
    .hero-panel { padding: 33px; border: 1px solid rgba(255,255,255,.22); background: rgba(4,31,72,.58); box-shadow: 0 30px 90px rgba(0,0,0,.22); backdrop-filter: blur(12px); }
    .hero-panel small { color: #bcd4ed; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; }
    .hero-panel h2 { margin: 17px 0 24px; font-size: 33px; }
    .path-row { display: grid; grid-template-columns: 38px 1fr; gap: 13px; align-items: center; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.18); font-size: 15px; }
    .path-row span { color: var(--gold); font: italic 22px Georgia, serif; }

    .institution-bar { color: #d8e8fa; background: #041f48; }
    .institution-bar .wrap { display: flex; align-items: center; gap: 36px; padding-top: 20px; padding-bottom: 20px; font-size: 14px; }
    .institution-bar strong { color: var(--white); font-size: 16px; }
    .institution-bar .label { color: #8fb7e2; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }

    .section { padding: 92px 0; }
    .light { background: var(--paper); }
    .intro { display: grid; grid-template-columns: .9fr 1.1fr; gap: 95px; }
    .intro-copy p, .section-head p, .card p, .place p, .contact-grid p { color: var(--muted); }
    .intro-copy strong { color: var(--ink); }
    .statement { margin-top: 28px; padding: 23px 26px; border-left: 4px solid var(--blue-bright); background: var(--paper); color: var(--ink) !important; font-size: 16px; }
    .section-head { max-width: 760px; margin-bottom: 48px; }

    .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
    .card { position: relative; min-height: 365px; padding: 31px 28px; border: 1px solid var(--line); border-top: 4px solid var(--blue); background: var(--white); box-shadow: 0 16px 45px rgba(10,63,132,.08); }
    .number { display: block; margin-bottom: 37px; color: var(--blue-bright); font: italic 34px Georgia, serif; }
    .card p { font-size: 16px; }
    .card .foot { position: absolute; right: 28px; bottom: 28px; left: 28px; margin: 0; padding-top: 17px; border-top: 1px solid var(--line); color: var(--ink); font-size: 14px; }

    .blue-section { color: var(--white); background: linear-gradient(125deg, #041f48 0%, #073b88 58%, #0b57c7 100%); }
    .places-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; }
    .places-intro p { color: #cfe1f5; }
    .places { display: grid; gap: 18px; }
    .place { padding: 27px 28px; border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.08); }
    .place-top { display: flex; justify-content: space-between; gap: 18px; align-items: start; margin-bottom: 13px; }
    .place h3 { font: 400 27px/1.2 Georgia, serif; }
    .place p { margin-bottom: 0; color: #d1e3f7; font-size: 15px; }
    .place-tag { flex: 0 0 auto; padding: 5px 9px; border: 1px solid rgba(255,211,106,.55); color: var(--gold); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
    .place-list { margin: 28px 0 0; padding: 0; list-style: none; }
    .place-list li { display: flex; gap: 12px; align-items: baseline; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.18); color: #dceafa; font-size: 15px; }
    .place-list li::before { content: "•"; color: var(--gold); }

    .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
    .person { overflow: hidden; border: 1px solid var(--line); background: var(--white); box-shadow: 0 16px 45px rgba(10,63,132,.09); }
    .person-photo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--sky); }
    .person-photo::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, rgba(3,26,61,.22)); }
    .person img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .person:nth-child(1) img { object-position: center center; }
    .person:nth-child(2) img { object-position: center 48%; }
    .person:nth-child(3) img { object-position: center 43%; }
    .person-copy { padding: 24px 25px 26px; border-top: 4px solid var(--blue-bright); }
    .person-copy span { color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
    .person-copy h3 { margin-top: 9px; margin-bottom: 0; font-size: 20px; }

    .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; }
    .contact-links { display: grid; gap: 15px; }
    .contact-link { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 21px 24px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .2s, background .2s, transform .2s; }
    .contact-link:hover { border-color: var(--blue-bright); background: var(--paper); transform: translateY(-2px); }
    .contact-link small { display: block; margin-bottom: 4px; color: var(--muted); font-size: 13px; }
    .contact-link strong { font-size: clamp(15px, 1.6vw, 19px); overflow-wrap: anywhere; }
    .contact-link b { color: var(--blue); font-size: 23px; font-weight: 400; }
    .call-link { color: var(--blue); font-size: 14px; text-underline-offset: 4px; }

    footer { padding: 28px 0; border-top: 1px solid var(--line); color: var(--muted); background: var(--paper); font-size: 13px; }
    footer .wrap { display: flex; justify-content: space-between; gap: 22px; }
    footer strong { color: var(--ink); }
    footer a { text-decoration: none; }

    @media (max-width: 930px) {
      .wrap { width: calc(100% - 44px); }
      header .wrap { flex-wrap: wrap; padding: 18px 0 14px; gap: 15px; }
      nav { width: 100%; gap: 20px; overflow-x: auto; padding-bottom: 4px; }
      .hero-grid { gap: 35px; }
      .hero-panel { padding: 25px; }
      .intro, .places-grid, .contact-grid { gap: 48px; }
      .card { min-height: 410px; }
    }
    @media (max-width: 700px) {
      html { scroll-padding-top: 145px; }
      .brand small { display: none; }
      nav { justify-content: flex-start; font-size: 13px; }
      .hero-grid, .intro, .places-grid, .contact-grid { grid-template-columns: 1fr; }
      .hero-grid { padding: 57px 0 65px; }
      .hero-panel { margin-top: 10px; }
      .institution-bar .wrap { flex-wrap: wrap; gap: 6px 22px; }
      .institution-bar .label { width: 100%; }
      .section { padding: 62px 0; }
      .cards, .team-grid { grid-template-columns: 1fr; }
      .card { min-height: 0; padding-bottom: 29px; }
      .card .foot { position: static; margin-top: 30px; }
      .number { margin-bottom: 20px; }
      .place-top { display: block; }
      .place-tag { display: inline-block; margin-bottom: 12px; }
      .team-grid { gap: 28px; }
      .person-photo { aspect-ratio: 4 / 3; }
      footer .wrap { flex-direction: column; gap: 9px; }
    }
    @media (max-width: 430px) {
      .wrap { width: calc(100% - 32px); }
      h1 { font-size: 44px; }
      h2 { font-size: 36px; }
      .hero-copy { font-size: 17px; }
      .actions .button { width: 100%; }
      .person-photo { aspect-ratio: 1 / 1; }
    }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
  
/* Mobile navigation follows scroll direction without shifting page content. */
@media (max-width:1000px) {
  header { transition:transform 200ms ease; }
  header.header-hidden { transform:translateY(-100%); pointer-events:none; }
  header:focus-within { pointer-events:auto; }
}
@media (prefers-reduced-motion:reduce) {
  header { transition:none; }
}
/* Project identity */
.project-logo { display:block; width:min(100%, 280px); height:auto; margin:28px auto 0; }
.materials-brand-layout { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:50px; align-items:center; }
.materials-logo { display:block; width:100%; height:auto; background:white; border:1px solid #dcecff; border-radius:8px; }
@media(max-width:800px) { .materials-brand-layout { grid-template-columns:1fr; gap:28px; } .materials-logo { width:160px; justify-self:center; } .project-logo { width:220px; } }
/* Materials and documentary photographs */
.keyword { color: var(--blue); font-weight: 700; }
.hero .keyword, .blue-section .keyword { color: var(--gold); }
nav a[aria-current="page"] { color: var(--gold); border-bottom: 2px solid var(--gold); }
.visit-photo { margin: 8px 0 22px; }
.visit-photo img { display:block; width:100%; height:auto; }
.visit-photo a { display:block; }
.visit-photo figcaption { color:#dceafa; font-size:14px; margin-top:12px; line-height:1.6; }
.original-link { display:inline-block; color:var(--blue); font-size:14px; font-weight:700; text-underline-offset:4px; padding:8px 0; }
.visit-photo .original-link { color:var(--gold); }
.places-grid { grid-template-columns:1fr; gap:35px; }
.places-intro { max-width:800px; }
.places { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:28px; }
.place-top { flex-wrap:wrap; }
.materials-intro { padding:58px 0 48px; }
.materials-intro h1 { font-size:clamp(40px,5vw,64px); max-width:850px; }
.materials-intro p { max-width:830px; color:#d7e6f7; font-size:18px; }
.materials-nav { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.materials-nav a { border:1px solid #8fb7e2; padding:9px 20px; text-decoration:none; font-size:16px; }
.materials-nav a:hover { background:#ffffff18; }
.material-section { padding:65px 0; }
.material-layout { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.5fr); gap:50px; align-items:start; }
.material-copy { padding-top:18px; }
.material-copy p { color:var(--muted); }
.material-copy h2 { color:var(--blue); }
.material-figure { margin:0; min-width:0; }
.material-figure img { display:block; width:100%; height:auto; box-shadow:0 14px 40px #06285a18; border:1px solid var(--line); }
.material-figure figcaption { margin-top:14px; color:var(--muted); font-size:14px; }
.materials-callout { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; margin-top:35px; padding-top:25px; border-top:1px solid var(--line); }
.materials-callout p { margin:0; max-width:650px; }
.card { display:flex; flex-direction:column; }
.card .foot { position:static; margin-top:auto; }
.materials-nav button { font:inherit; font-size:16px; border:1px solid #a7c7eb; padding:9px 20px; color:var(--blue); background:white; cursor:pointer; }
.materials-nav button:hover { background:#dcecff; border-color:var(--blue); }
.materials-nav button[aria-pressed="true"] { color:white; background:var(--blue); border-color:var(--blue); }
.materials-nav button:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
.library-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:28px; align-items:start; }
.library-card { min-width:0; width:100%; max-width:580px; border:1px solid var(--line); background:white; }
.library-card[hidden], #library-empty[hidden] { display:none; }
.library-card > a { display:block; }
.library-card img { display:block; width:100%; height:auto; }
.library-card-copy { padding:25px; }
.library-card h2 { font-family:Arial,Helvetica,sans-serif; font-size:21px; font-weight:700; line-height:1.3; letter-spacing:-.02em; color:var(--ink); }
.library-card p { color:var(--muted); font-size:16px; }
.library-card .eyebrow { margin-bottom:14px; }
.material-tags { display:flex; flex-wrap:wrap; gap:6px 14px; padding:0; list-style:none; color:var(--blue); font-size:14px; }
.material-actions { display:flex; flex-wrap:wrap; gap:6px 22px; padding-top:15px; border-top:1px solid var(--line); }
.library-status { font-size:14px; color:var(--muted); margin-bottom:22px; }
/* Blue, light blue and white: shared palette across both pages. */
header { color:var(--navy); background:rgba(255,255,255,.97); border-bottom:1px solid var(--line); }
.brand-mark { color:var(--blue); background:var(--paper); border-color:var(--line); }
.brand small { color:var(--muted); }
nav a:hover, .nav-contact, nav a[aria-current="page"] { color:var(--blue); }
nav a[aria-current="page"] { border-color:var(--blue); }
nav a { text-underline-offset:6px; }
nav a:hover { text-decoration:underline; }
a:focus-visible { outline-color:var(--blue); }
.hero { color:var(--ink); background:linear-gradient(115deg,#ffffff 0%,#eff6fd 60%,#dcecff 100%); }
.hero::after { display:none; }
.hero .eyebrow, .hero .keyword, h1 em { color:var(--blue); }
.hero-copy, .materials-intro p { color:var(--muted); }
.button { color:white; background:var(--blue); border-color:var(--blue); box-shadow:0 5px 14px #0b57c71a; }
.button:hover { color:white; background:#08459f; border-color:#08459f; }
.button.secondary { color:var(--blue); background:white; border-color:#91b7e4; box-shadow:none; }
.button.secondary:hover { color:var(--navy); background:#e4f0ff; }
.hero-panel { color:white; background:var(--navy); border:1px solid #174b87; box-shadow:0 18px 45px #06285a18; }
.hero-panel small { color:#c5def7; }
.hero-panel .path-row { border-color:#ffffff30; }
.hero-panel .path-row span { color:#b9ddff; }
.hero-panel h2 { color:white; }
.institution-bar { background:#e1eefc; color:#345676; border-bottom:1px solid var(--line); }
.institution-bar strong { color:var(--navy); }
.institution-bar .label { color:#466788; }
.statement { background:#e7f2ff; border-color:var(--blue); }
.card, .person { box-shadow:0 8px 26px #0a3f840b; }
.card h3 { color:var(--navy); }
.number { color:var(--blue); }
.blue-section { background:#e7f1fc; color:var(--ink); }
.blue-section .eyebrow, .blue-section .keyword { color:var(--blue); }
.places-intro p, .place p, .visit-photo figcaption { color:var(--muted); }
.place { background:white; border-color:var(--line); box-shadow:0 8px 26px #0a3f840b; }
.place h3 { color:var(--navy); }
.place-tag { background:var(--paper); color:var(--blue); border-color:#b4d1ef; }
.place-list li { color:var(--ink); border-color:#c7daef; }
.place-list li::before { color:var(--blue); }
.visit-photo .original-link { color:var(--blue); }
.materials-nav a { background:white; color:var(--blue); border-color:#a7c7eb; }
.materials-nav a:hover { background:#dcecff; border-color:var(--blue); }
.materials-logo { border-color:#d5e4f4; box-shadow:0 8px 26px #06285a0a; }
.materials-callout { background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--blue); padding:25px; }
.contact-link:hover { background:#e7f2ff; }
.original-link:hover { color:#073b88; }
@media(max-width:1000px) { header .wrap { flex-wrap:wrap; padding:18px 0 14px; gap:15px; } nav { flex-wrap:wrap; width:100%; gap:12px 20px; white-space:normal; } }
@media(max-width:700px) { .places,.material-layout { grid-template-columns:1fr; } .material-layout { gap:20px; } .material-section { padding:42px 0; } .materials-intro { padding:42px 0; } .place { padding:22px; } .material-copy { padding-top:0; } }