:root { color-scheme: light; --paper: #f1f2ee; --ink: #213c4a; --muted: #5c7079; --line: #c3ced1; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1rem/1.7 Arial, Helvetica, sans-serif; }
a { color: inherit; text-underline-offset: 5px; }
a:focus-visible, summary:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
::selection { background: #c3d9e1; }
.skip-link { position: absolute; top: -100px; left: 20px; padding: 12px; background: var(--paper); z-index: 5; }
.skip-link:focus { top: 10px; }
.page { max-width: 1680px; margin: auto; padding: 0 clamp(20px, 4vw, 64px); }
.header { display: flex; align-items: center; gap: 30px; padding: 26px 0; }
.brand { font: bold 2rem/1 Georgia, serif; letter-spacing: -.06em; text-decoration: none; }
.header-note { font: italic 1rem Georgia, serif; color: var(--muted); }
.house-link { margin-left: auto; font-size: .875rem; text-decoration: none; }
.house-link span { margin-left: 12px; }
.house-link:hover { text-decoration: underline; }
h1,h2,h3,p,figure { margin: 0; }
.entrance { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .27fr); }
.entrance-image { background: #142d3a; display: flex; align-items: center; }
.entrance-image img { display: block; width: 100%; height: auto; }
.wayfinding { padding: clamp(20px, 2.5vw, 36px); background: #e3e8e5; border: 1px solid #c4cfce; display: flex; flex-direction: column; }
.sign-label { font: .8125rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; text-transform: uppercase; letter-spacing: .1em; padding-bottom: 18px; border-bottom: 2px solid var(--ink); }
.wayfinding nav { flex: 1; }
.wayfinding a { display: grid; grid-template-columns: 22px minmax(0, 1fr) 12px; column-gap: 10px; align-items: start; padding: clamp(13px, 1.9vw, 28px) 0; font-size: clamp(.9375rem, 1.2vw, 1.125rem); line-height: 1.4; text-decoration: none; border-bottom: 1px solid #bbc8c9; }
.wayfinding a br { display: none; }
.wayfinding a span { color: var(--muted); font: .75rem/1.9 ui-monospace, SFMono-Regular, Consolas, monospace; }
.wayfinding a:hover { color: #14749b; }
.sign-foot { color: var(--muted); font-size: .75rem; padding-top: 22px; }
.welcome-line { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .75fr); gap: 40px; padding: 30px 0 40px; border-bottom: 1px solid var(--ink); }
h1 { font: normal clamp(1.4rem, 2vw, 2rem)/1.45 Georgia, serif; }
h1 em { display: block; font-weight: normal; color: var(--muted); }
.welcome-line p { font-size: .9375rem; max-width: 60ch; color: var(--muted); }
.floor { padding: 38px 0 24px; }
.department-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 22px; }
.department-heading h2 { font: normal 1.75rem Georgia, serif; }
.department-heading > span { color: var(--muted); font-size: .875rem; }
.department-list { border-top: 1px solid var(--line); }
.department-list details { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
.department-list summary { display: grid; grid-template-columns: 32px minmax(0, 1fr) minmax(0, .8fr) 20px; gap: 20px; align-items: center; padding: 24px 0; }
.department-number { color: var(--muted); font: .8125rem ui-monospace, SFMono-Regular, Consolas, monospace; }
h3 { font: normal clamp(1.2rem, 1.8vw, 1.65rem)/1.3 Georgia, serif; }
.department-description { color: var(--muted); font-size: .875rem; }
.toggle { position: relative; width: 20px; height: 20px; }
.toggle::before, .toggle::after { content: ''; position: absolute; width: 14px; height: 1px; top: 9px; left: 3px; background: currentColor; }
.toggle::after { transform: rotate(90deg); }
details[open] > summary .toggle::after { transform: none; }
.department-list summary:hover h3 { color: #14749b; }
.department-content { padding: 0 30px 24px 52px; color: var(--muted); max-width: 850px; }
.topics { margin-top: 16px; font-size: .8125rem; color: var(--ink); }
.opening-note { color: var(--muted); font-size: .8125rem; margin-top: 22px; }
.house { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); margin-top: 18px; }
.house summary { display: grid; grid-template-columns: 120px minmax(0, 1fr) 20px; gap: 24px; align-items: center; padding: 20px 0; }
.house-label { font: .8125rem ui-monospace, SFMono-Regular, Consolas, monospace; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.house h2 { font: normal 1.25rem Georgia, serif; }
.house-content { max-width: 760px; padding: 12px 0 30px; }
.house-content p + p { margin-top: 16px; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0 28px; color: var(--muted); font-size: .75rem; }
@media (max-width: 1000px) {
    .entrance { grid-template-columns: minmax(0, 1fr); }
    .wayfinding { padding: 22px; }
    .wayfinding nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
    .wayfinding a { padding: 18px 0; }
    .sign-foot { padding-top: 14px; }
}
@media (max-width: 650px) {
    .header-note { display: none; }
    .header { gap: 14px; padding: 22px 0; }
    .brand { font-size: 1.75rem; }
    .house-link { font-size: .8125rem; }
    .house-link span { display: none; }
    .entrance-image { margin-inline: -20px; }
    .wayfinding nav { grid-template-columns: minmax(0, 1fr); }
    .wayfinding a { padding: 15px 0; }
    .welcome-line { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 26px 0; }
    .department-heading { flex-wrap: wrap; gap: 8px; }
    .department-list summary { grid-template-columns: 24px minmax(0, 1fr) 20px; gap: 6px 12px; }
    .department-description { grid-column: 2; }
    .department-number { grid-row: 1 / 3; align-self: start; padding-top: 5px; }
    .department-list .toggle { grid-column: 3; grid-row: 1 / 3; }
    .department-content { padding-left: 36px; padding-right: 0; }
    .house summary { grid-template-columns: minmax(0, 1fr) 20px; gap: 8px; }
    .house-label, .house h2 { grid-column: 1; }
    .house .toggle { grid-column: 2; grid-row: 1 / 3; }
    footer { flex-wrap: wrap; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* A continuous image surface, with the directory floating inside its frame. */
body { background: #f8f9f7; }
.page { max-width: 1800px; padding-inline: clamp(20px, 3vw, 54px); }
.entrance { display: block; }
.entrance-scene { position: relative; margin-inline: calc(-1 * clamp(20px, 3vw, 54px)); }
.entrance-image { display: block; margin: 0; }
.entrance-image img { width: 100%; height: clamp(580px, 48vw, 790px); object-fit: cover; object-position: center top; }
.wayfinding { position: absolute; right: clamp(24px, 5vw, 90px); top: 50%; transform: translateY(-42%); width: clamp(260px, 23vw, 340px); padding: 28px; background: rgba(245, 248, 246, .92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.75); border-radius: 12px; box-shadow: 0 16px 54px #061c2926; }
.wayfinding nav { display: block; }
.wayfinding a { padding: 17px 0; font-size: 1rem; }
.sign-foot { padding-top: 18px; }
.welcome-line { max-width: 1280px; margin: auto; padding: 38px 0 50px; border: 0; align-items: center; }
.welcome-line h1 { font-size: clamp(1.6rem, 2.4vw, 2.4rem); }
.editorial { max-width: 1400px; margin: 0 auto 56px; }
.editorial-heading { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.editorial-heading h2 { font: normal clamp(1.4rem, 2vw, 1.9rem) Georgia, serif; }
.editorial-heading > span { font-size: .8125rem; color: var(--muted); }
.mosaic { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; }
.story { display: block; color: inherit; text-decoration: none; min-width: 0; overflow: hidden; border-radius: 10px; }
.story img { display: block; width: 100%; height: auto; object-fit: cover; }
.story-copy { padding: clamp(22px, 3vw, 38px); }
.story-category { font: .75rem/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .03em; }
.story h3 { font-size: clamp(1.65rem, 2.6vw, 2.7rem); line-height: 1.15; margin: 15px 0; }
.story p { max-width: 43ch; margin-bottom: 24px; }
.story-link { display: inline-flex; gap: 24px; font-size: .875rem; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.story:hover .story-link { color: #228db3; }
.story-main { grid-row: span 2; background: #193b4d; color: #f0f5f5; }
.story-main img { aspect-ratio: 1.15; }
.story-main .story-copy { padding-bottom: 48px; }
.story-main h3 { font-size: clamp(2rem, 3.3vw, 3.5rem); }
.story-main .story-category, .story-main p { color: #c5d9df; }
.story-ai { background: #e9eef0; }
.story-ai img { aspect-ratio: 2.15; }
.story-ai .story-copy { padding-block: 25px; }
.story-perspective { display: grid; grid-template-columns: .9fr 1.1fr; background: #e7e8e0; }
.story-perspective img { height: 100%; min-height: 230px; object-position: 25% center; }
.story-perspective h3 { font-size: clamp(1.4rem, 2vw, 2rem); }
.floor, .house, footer { max-width: 1280px; margin-inline: auto; }
.floor { border-top: 1px solid var(--line); }
@media (max-width: 1000px) {
    .wayfinding { right: 28px; width: 270px; padding: 22px; }
    .entrance-image img { height: 640px; }
    .mosaic { gap: 18px; }
    .story-perspective { display: block; }
    .story-perspective img { height: auto; min-height: 0; aspect-ratio: 2.3; }
}
@media (max-width: 650px) {
    .entrance-image img { height: 760px; object-position: center top; }
    .wayfinding { top: auto; bottom: 22px; left: 22px; right: 22px; width: auto; transform: none; padding: 20px 24px; background: rgba(245,248,246,.94); }
    .wayfinding a { padding: 12px 0; }
    .sign-label { padding-bottom: 12px; }
    .sign-foot { padding-top: 12px; }
    .welcome-line { padding-block: 28px 38px; }
    .mosaic { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .story-main { grid-row: auto; }
    .story-main img { aspect-ratio: 1.55; }
    .story-main .story-copy { padding-bottom: 28px; }
    .story-perspective { display: grid; }
    .story-perspective img { height: 100%; aspect-ratio: auto; }
}
/* Shared grid layer grows with the sign, including enlarged text. */
.entrance-scene { display: grid; min-height: clamp(580px, 48vw, 790px); }
.entrance-image { grid-area: 1 / 1; position: relative; min-width: 0; }
.entrance-image img { position: absolute; inset: 0; height: 100%; }
.wayfinding { grid-area: 1 / 1; position: relative; inset: auto; transform: none; align-self: center; justify-self: end; margin: 80px clamp(24px, 5vw, 90px) 32px 24px; }
@media (max-width: 650px) {
    .entrance-scene { min-height: 760px; }
    .wayfinding { width: auto; justify-self: stretch; align-self: end; margin: 190px 22px 22px; }
}