@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Noto+Serif+Bengali:wght@500;700&family=Inter:wght@500;600;700&display=swap');

:root {
   --ivory: #f5f0e6;
   --paper: #fbf8f1;
   --paper-deep: #ece3d3;
   --ink: #28241f;
   --muted: #746a5d;
   --oxblood: #6f2d2d;
   --forest: #293e37;
   --bronze: #9a7441;
   --line: #cfc2ad;
   --shadow: 0 24px 70px rgba(39, 31, 22, .13);
   --serif: 'Source Serif 4', Georgia, serif;
   --sans: Inter, Arial, sans-serif;
}

* {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
}

section[id] {
   scroll-margin-top: 110px;
}

body {
   margin: 0;
   color: var(--ink);
   background:
      linear-gradient(rgba(245, 240, 230, .96), rgba(245, 240, 230, .96)),
      repeating-linear-gradient(0deg, rgba(99, 77, 48, .035) 0, rgba(99, 77, 48, .035) 1px, transparent 1px, transparent 5px);
   font-family: var(--serif);
   font-size: 18px;
   line-height: 1.72;
}

img {
   max-width: 100%;
   display: block;
}

a {
   color: inherit;
}

.container {
   width: min(1180px, calc(100% - 42px));
   margin-inline: auto;
}

.narrow {
   width: min(820px, calc(100% - 42px));
   margin-inline: auto;
}

.skip-link {
   position: absolute;
   left: -9999px;
}

.skip-link:focus {
   left: 1rem;
   top: 1rem;
   z-index: 100;
   padding: .65rem .9rem;
   background: var(--forest);
   color: white;
}

/* Header */
.masthead {
   position: sticky;
   top: 0;
   z-index: 40;
   overflow-x: clip;
   background: #1f302b;
   backdrop-filter: blur(10px);
   border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.masthead-rule {
   height: 4px;
   background: linear-gradient(90deg, var(--bronze), var(--oxblood));
}

.navbar {
   min-height: 90px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 28px;
}

.brand {
   display: flex;
   gap: 15px;
   align-items: center;
   text-decoration: none;
}

.brand-seal {
   width: 52px;
   height: 52px;
   border: 1px solid #d6b675;
   border-radius: 50%;
   display: grid;
   place-items: center;
   color: #f6efe1;
   font-weight: 700;
   letter-spacing: .06em;
   background: transparent;
   box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .03);
}

.brand-copy strong {
   display: block;
   white-space: nowrap;
   font-size: 24px;
   line-height: 1.05;
   color: #f6efe1;
}

.brand-copy span {
   display: block;
   font-family: 'Noto Serif Bengali', serif;
   font-size: 14px;
   color: #d9c9ac;
   margin-top: 3px;
}

.nav-menu {
   list-style: none;
   display: flex;
   margin: 0;
   padding: 0;
   gap: 2px;
}

.nav-menu a {
   display: block;
   padding: 34px 12px 31px;
   text-decoration: none;
   text-transform: uppercase;
   white-space: nowrap;
   letter-spacing: .1em;
   font: 700 11px/1 var(--sans);
   color: #f6efe1;
   border-bottom: 3px solid transparent;
}

.nav-menu a:hover,
.nav-menu a[aria-current="page"] {
   color: #ffffff;
   border-bottom-color: var(--bronze);
}

.nav-toggle {
   display: none;
   border: 1px solid #d6b675;
   background: transparent;
   color: #f6efe1;
   padding: 10px 13px;
   font: 700 12px var(--sans);
   text-transform: uppercase;
   letter-spacing: .08em;
}


/* Museum entrance */
.kicker,
.object-label {
   font: 700 12px/1.4 var(--sans);
   text-transform: uppercase;
   letter-spacing: .16em;
   color: var(--bronze);
}

h1,
h2,
h3 {
   margin: 0 0 18px;
   line-height: 1.08;
   font-weight: 600;
   color: var(--oxblood);
}

h1 {
   font-size: clamp(54px, 7vw, 94px);
   letter-spacing: -.025em;
}

h2 {
   font-size: clamp(36px, 4.3vw, 58px);
   letter-spacing: -.018em;
}

h3 {
   font-size: 27px;
}

.lede {
   max-width: 760px;
   color: var(--forest);
   font-size: 22px;
   line-height: 1.52;
}

.button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 48px;
   padding: 11px 18px;
   text-decoration: none;
   font: 700 12px var(--sans);
   text-transform: uppercase;
   letter-spacing: .08em;
   border: 1px solid var(--forest);
}

.button.primary {
   background: var(--forest);
   color: var(--paper);
}

.button:hover {
   transform: translateY(-1px);
}

.portrait-frame {
   margin: 0;
   padding: 20px;
   background: var(--paper);
   border: 1px solid var(--line);
   box-shadow: var(--shadow);
   position: relative;
}

.portrait-frame::before,
.portrait-frame::after {
   content: '';
   position: absolute;
   inset: 10px;
   border: 1px solid rgba(154, 116, 65, .45);
   pointer-events: none;
}

.portrait-frame::after {
   inset: 15px;
   border-color: rgba(111, 45, 45, .22);
}

.portrait-frame img {
   width: 100%;
   height: auto;
   filter: sepia(.12) contrast(1.03);
}

.exhibit-grid .portrait-frame img {
   width: 100%;
   height: 320px;
   object-fit: contain;
   object-position: center center;
   background: var(--paper);
   filter: sepia(.12) contrast(1.03);
}

.portrait-frame figcaption {
   padding: 16px 8px 2px;
   text-align: center;
   color: var(--muted);
   font-size: 14px;
}

/* Sections */
.section {
   padding: 92px 0;
   background: var(--ivory);
}

.section.alt {
   background: var(--paper-deep);
   border-block: 1px solid var(--line);
}

.section-head {
   display: grid;
   grid-template-columns: .42fr 1fr;
   gap: 34px;
   align-items: start;
   margin-bottom: 44px;
}

.section-head p {
   margin: 0;
}

.section-head .intro {
   padding-top: 32px;
   font-size: 19px;
   color: var(--muted);
}

.section-head-compact {
   grid-template-columns: minmax(430px, 1fr) minmax(0, 1.55fr);
   gap: 48px;
   align-items: start;
   margin-bottom: 32px;
}

.section-head-compact h2 {
   max-width: none;
   font-size: clamp(38px, 3.6vw, 52px);
}

.section-head-compact .intro {
   padding-top: 38px;
}

.exhibit-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px;
}

.exhibit-card {
   position: relative;
   padding: 28px;
   min-height: 285px;
   background: var(--paper);
   border: 1px solid var(--line);
   box-shadow: 0 12px 30px rgba(38, 30, 22, .07);
}

.exhibit-card::before {
   content: attr(data-number);
   position: absolute;
   top: 18px;
   right: 20px;
   font: 700 11px var(--sans);
   color: var(--bronze);
   letter-spacing: .12em;
}

.exhibit-card p {
   color: var(--muted);
}

.exhibit-card a {
   text-decoration-thickness: 1px;
   text-underline-offset: 4px;
   color: var(--forest);
   font-weight: 600;
}

.timeline {
   margin: 0;
   padding: 0;
   list-style: none;
   display: grid;
   gap: 1px;
   border: 1px solid var(--line);
   background: var(--line);
}

.timeline li {
   background: var(--paper);
}

.timeline li a {
   display: grid;
   grid-template-columns: 155px 1fr;
   color: inherit;
   text-decoration: none;
   transition: background .18s ease;
}

.timeline time {
   padding: 20px 22px;
   background: var(--forest);
   color: var(--paper);
   font: 700 13px var(--sans);
   letter-spacing: .06em;
   transition: background .18s ease;
}

.timeline li a>span {
   padding: 19px 24px;
}

.timeline li a:hover {
   background: var(--paper-deep);
}

.timeline li a:hover time {
   background: var(--oxblood);
}

.timeline li a:focus-visible {
   outline: 3px solid var(--bronze);
   outline-offset: -3px;
}

.gallery-band {
   background: var(--forest);
   color: #f7f0e3;
}

.gallery-band h2,
.gallery-band h3 {
   color: #f7f0e3;
}

.gallery-band .kicker {
   color: #d6b675;
}

.gallery-band .lede {
   color: #f7f0e3;
}

.gallery-band .object-record dd {
   color: #f7f0e3;
}

.gallery-grid {
   display: grid;
   grid-template-columns: 1.1fr .9fr;
   gap: 46px;
   align-items: center;
}

.object-record {
   background: rgba(255, 255, 255, .06);
   border: 1px solid rgba(255, 255, 255, .22);
   padding: 30px;
}

.object-record dl {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 18px;
}

.object-record dt {
   font: 700 11px var(--sans);
   text-transform: uppercase;
   letter-spacing: .12em;
   color: #d6b675;
}

.object-record dd {
   margin: 4px 0 0;
}

/* Archival image lightbox */
.archive-viewer-trigger {
   position: relative;
   display: block;
   width: 100%;
   padding: 0;
   border: 0;
   background: transparent;
   cursor: zoom-in;
   font: inherit;
   color: inherit;
}

.archive-viewer-trigger img {
   width: 100%;
   height: auto;
}

.archive-viewer-prompt {
   position: absolute;
   right: 14px;
   bottom: 14px;
   padding: 8px 11px;
   background: rgba(31, 48, 43, .92);
   color: #f6efe1;
   border: 1px solid rgba(214, 182, 117, .75);
   font: 700 11px var(--sans);
   text-transform: uppercase;
   letter-spacing: .08em;
   pointer-events: none;
}

.archive-viewer-trigger:hover .archive-viewer-prompt,
.archive-viewer-trigger:focus-visible .archive-viewer-prompt {
   background: var(--oxblood);
}

.archive-viewer-trigger:focus-visible {
   outline: 3px solid var(--bronze);
   outline-offset: 4px;
}

.archive-viewer {
   width: min(96vw, 1500px);
   height: min(94vh, 1100px);
   padding: 0;
   border: 1px solid #766853;
   background: #1f2422;
   color: #f6efe1;
   box-shadow: 0 28px 90px rgba(0, 0, 0, .45);
}

.archive-viewer::backdrop {
   background: rgba(14, 17, 16, .86);
   backdrop-filter: blur(3px);
}

.archive-viewer-shell {
   height: 100%;
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
}

.archive-viewer-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   min-height: 62px;
   padding: 10px 16px 10px 20px;
   background: #1f302b;
   border-bottom: 1px solid rgba(255, 255, 255, .15);
   font-family: var(--sans);
}

.archive-viewer-toolbar strong {
   font-size: 14px;
   letter-spacing: .03em;
}

.archive-viewer-controls {
   display: flex;
   align-items: center;
   gap: 7px;
}

.archive-viewer-controls button {
   min-width: 38px;
   min-height: 36px;
   padding: 6px 10px;
   border: 1px solid rgba(214, 182, 117, .55);
   background: transparent;
   color: #f6efe1;
   font: 700 13px var(--sans);
   cursor: pointer;
}

.archive-viewer-controls button:hover {
   background: rgba(255, 255, 255, .1);
}

#archive-viewer-zoom {
   min-width: 48px;
   text-align: center;
   font: 600 12px var(--sans);
}

.archive-viewer-viewport {
   overflow: auto;
   padding: 30px;
   background: #252927;
   text-align: center;
}

.archive-viewer-viewport img {
   display: block;
   width: 100%;
   max-width: none;
   height: auto;
   margin: 0 auto;
   background: white;
   box-shadow: 0 10px 35px rgba(0, 0, 0, .3);
}

/* Library Page */
.library-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 24px;
}

.library-card {
   background: var(--paper);
   border: 1px solid var(--line);
   padding: 26px;
   display: grid;
   grid-template-columns: 90px 1fr;
   gap: 22px;
   align-items: start;
}

.library-card .folio {
   width: 90px;
   height: 130px;
   object-fit: cover;
   border: 1px solid var(--line);
   background: var(--paper-deep);
}

.library-card p {
   margin: 8px 0;
   color: var(--muted);
}

/* Interior pages */
.page-hero {
   padding: 86px 0 58px;
   border-bottom: 1px solid var(--line);
   background: var(--paper);
}

.page-hero h1 {
   font-size: clamp(48px, 6vw, 78px);
}

.article-layout {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 280px;
   gap: 60px;
   padding: 75px 0;
}

.article-body h2 {
   margin-top: 58px;
}

.article-body p {
   font-size: 19px;
}

.sidebar {
   position: sticky;
   top: 120px;
   align-self: start;
}

.sidebar-card {
   padding: 22px;
   background: var(--paper);
   border: 1px solid var(--line);
   margin-bottom: 18px;
}

.sidebar-card h3 {
   font-size: 22px;
}

.source-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
}

.source-card {
   background: var(--paper);
   border: 1px solid var(--line);
   padding: 23px;
}

.source-card p {
   color: var(--muted);
}

.source-card a {
   font-weight: 600;
   color: var(--forest);
}

.policy {
   margin-top: 54px;
   padding: 34px;
   border-left: 4px solid var(--bronze);
   background: var(--paper);
}

/* Footer and publisher mark */
.site-footer {
   margin-top: 40px;
   background: #1f302b;
   color: #f6efe1;
   border-top: 4px solid var(--bronze);
}

.footer-inner {
   display: grid;
   grid-template-columns: 1.2fr .8fr .7fr;
   gap: 35px;
   padding: 58px 0;
}

.site-footer h2,
.site-footer h3 {
   color: #f6efe1;
}

.site-footer a {
   color: #f6efe1;
}

.site-footer nav {
   display: grid;
   gap: 8px;
}

.publisher-mark {
   text-align: center;
}

.publisher-mark .mark {
   width: 66px;
   height: 66px;
   margin: 0 auto 10px;
   border: 1px solid #d6b675;
   border-radius: 50%;
   display: grid;
   place-items: center;
   font-size: 28px;
}

.publisher-mark small {
   display: block;
   color: #d9c9ac;
   line-height: 1.5;
}

.footer-bottom {
   padding: 14px 0 20px;
   border-top: 1px solid rgba(255, 255, 255, .16);
   color: #c9bda8;
   font-size: 13px;
}

.reveal {
   opacity: 0;
   transform: translateY(20px);
   transition: opacity .7s ease, transform .7s ease;
}

.reveal.is-visible {
   opacity: 1;
   transform: none;
}

@media (prefers-reduced-motion: reduce) {
   * {
      scroll-behavior: auto !important;
   }

   .reveal {
      opacity: 1;
      transform: none;
      transition: none;
   }
}

@media (max-width: 1280px) {
   .nav-toggle {
      display: block;
   }

   .nav-menu {
      display: none;
      position: absolute;
      top: 94px;
      left: 0;
      right: 0;
      background: #1f302b;
      border-bottom: 1px solid var(--line);
      padding: 12px 24px 20px;
   }

   .nav-menu.open {
      display: block;
   }

   .nav-menu a {
      padding: 14px 0;
   }

   .gallery-grid,
   .section-head,
   .article-layout,
   .footer-inner {
      grid-template-columns: 1fr;
   }

   .portrait-frame {
      max-width: 520px;
   }

   .section-head .intro {
      padding-top: 0;
   }

   .exhibit-grid,
   .source-grid {
      grid-template-columns: 1fr 1fr;
   }


   .sidebar {
      position: static;
   }

   .footer-inner>nav {
      justify-items: center;
      text-align: center;
      width: fit-content;
      margin-inline: auto;
   }

}

@media (max-width: 680px) {
   body {
      font-size: 17px;
   }

   .navbar {
      gap: 12px;
   }

   .brand {
      gap: 10px;
   }

   .brand-copy strong {
      font-size: 17px;
   }

   .container,
   .narrow {
      width: min(100% - 28px, 1180px);
   }

   .brand-seal {
      width: 44px;
      height: 44px;
   }

   h1 {
      font-size: 49px;
   }

   .page-hero h1 {
      font-size: clamp(40px, 11vw, 48px);
   }

   .section {
      padding: 64px 0;
   }

   .exhibit-grid,
   .source-grid,
   .library-grid {
      grid-template-columns: 1fr;
   }

   .timeline li a {
      grid-template-columns: 1fr;
   }

   .object-record dl {
      grid-template-columns: 1fr;
   }


   .library-card {
      grid-template-columns: 72px 1fr;
   }

   .library-card .folio {
      width: 72px;
      height: 104px;
   }

   .button {
      width: 100%;
   }

   .archive-viewer {
      width: 100vw;
      height: 100vh;
      max-width: none;
      max-height: none;
      border: 0;
   }

   .archive-viewer-toolbar {
      align-items: flex-start;
      flex-direction: column;
      gap: 8px;
   }

   .archive-viewer-controls {
      width: 100%;
   }

   .archive-viewer-viewport {
      padding: 14px;
   }

   .archive-viewer-prompt {
      right: 8px;
      bottom: 8px;
   }


   /* Mobile footer */
   .footer-inner {
      gap: 38px;
      padding: 46px 0 38px;
   }

}

/* Catalogue refinements */
.source-card {
   text-decoration: none;
   color: inherit;
   transition: transform .18s ease, box-shadow .18s ease;
}

.source-card:hover {
   transform: translateY(-3px);
   box-shadow: 0 14px 32px rgba(38, 30, 22, .08);
}

dl div {
   margin-bottom: 14px;
}

dt {
   font: 700 11px var(--sans);
   text-transform: uppercase;
   letter-spacing: .1em;
   color: var(--bronze);
}

dd {
   margin: 4px 0 0;
   color: var(--forest);
}