/*
  Editorial visual system selected from visual-system-prototype.html.
  This file deliberately overrides the legacy BusinessBlue layout while keeping
  the existing page markup, content, and links intact.
*/

:root {
  --ink: #142b47;
  --blue: #39669d;
  --blue-deep: #1a3151;
  --blue-pale: #e8f0f7;
  --green: #789f14;
  --paper: #fbfaf6;
  --stone: #e6e1d6;
  --text: #26313c;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { overflow-y: scroll; scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--text);
  background: #dce5ec;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.58;
}

img { max-width: 100%; height: auto; }

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--green); }

.clear, br.clear { clear: both; }

div.wrapper { width: 100%; margin: 0; }
.col1 { color: #fff; background: var(--blue-deep); }
.col2 { color: #fff; background: var(--blue); }
.col3 { color: var(--ink); background: var(--blue-pale); }
.col4 { color: var(--text); background: var(--paper); }
.col5 { color: #fff; background: var(--blue); }
.col6 { color: #dce6ef; background: var(--ink); }
.col3 a, .col4 a { background: transparent; }
.col6 a { color: #dce6ef; background: transparent; }

#header, #topbar, #intro, #breadcrumb, #container, #footer, #copyright {
  width: min(1120px, calc(100% - 2.5rem));
  margin: 0 auto;
}

/* Header */
#header { padding: clamp(1.25rem, 2.6vw, 2rem) 0; }
#header #logo { float: none; width: auto; }
#header #logo h1 { float: none; margin: 0; font-family: var(--serif); font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 400; letter-spacing: -.03em; line-height: 1.02; }
#header #logo h1 a { color: #fff; background: transparent; font-size: inherit; text-decoration: none; }
#header #logo p { float: none; height: auto; margin: .7rem 0 0; padding: .1rem 0 .1rem .85rem; border-left: 2px solid var(--green); color: #c5d4e4; font-family: var(--sans); font-size: .7rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }

/* Navigation */
#topbar { min-height: 0; }
#topnav { float: none; margin: 0; font-family: var(--sans); font-size: .83rem; }
#topnav ul, #topnav li { float: none; margin: 0; padding: 0; }
#topnav > ul { display: flex; flex-wrap: wrap; align-items: stretch; }
#topnav > ul > li { position: relative; list-style: none; }
#topnav li a:link, #topnav li a:visited, #topnav li a:hover {
  margin: 0;
  padding: .9rem 1.05rem;
  border: 0;
  color: #fff;
  background: transparent;
  font-weight: 750;
  text-decoration: none;
}
#topnav > ul > li > a { display: block; }
#topnav > ul > li > a:hover, #topnav > ul > li.active > a { background: var(--ink); }
#topnav li ul {
  z-index: 5;
  top: 100%;
  left: -999em;
  width: max-content;
  min-width: 14rem;
  border: 0;
  box-shadow: 0 10px 24px rgb(20 43 71 / .22);
}
#topnav > ul > li:hover, #topnav > ul > li:focus-within { position: relative; }
#topnav > ul > li:hover > ul, #topnav > ul > li:focus-within > ul { left: 0; }
#topnav li li a:link, #topnav li li a:visited, #topnav li li a:hover {
  width: auto;
  padding: .65rem .95rem;
  color: #fff;
  background: var(--ink);
  font-size: .78rem;
}
#topnav li li a:hover { color: #fff; background: #244672; }

.nav-toggle, .nav-subtoggle { display: none; }

/* Breadcrumb and shared main content */
#breadcrumb { padding: .85rem 0; font-size: .78rem; }
#breadcrumb ul { margin: 0; padding: 0; list-style: none; }
#breadcrumb li { display: inline; }
#breadcrumb li + li { margin-left: .35rem; }
#breadcrumb .first { color: #5c7184; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
#breadcrumb a { color: var(--ink); }

#container { padding: clamp(1.8rem, 3.8vw, 3.3rem) 0; }
.col4 > #container + #container { padding-top: 0; }

div.wrapper h1, div.wrapper h2, div.wrapper h3, div.wrapper h4, div.wrapper h5, div.wrapper h6 {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.1;
}
div.wrapper h1 { max-width: 24ch; margin: 0 0 1.25rem; padding: 0 0 .7rem; border-bottom: 2px solid var(--green); font-size: clamp(1.85rem, 3.2vw, 2.45rem); letter-spacing: -.035em; }
div.wrapper h2 { margin: 1.7rem 0 .65rem; padding: 0; border: 0; font-size: clamp(1.3rem, 2.1vw, 1.7rem); letter-spacing: -.02em; }
div.wrapper h3, div.wrapper h4, div.wrapper h5, div.wrapper h6 { margin: 1.1rem 0 .4rem; font-size: 1.1rem; }
#container p { max-width: 76ch; margin: 0 0 1.2rem; }
#container > ul, #container > ol { max-width: 76ch; padding-left: 1.35rem; }
#container li { margin-bottom: .35rem; }
#container > img, #container > p > img { margin: 1.3rem 0; border: 1px solid #c9d0d3; box-shadow: 0 10px 22px rgb(20 43 71 / .1); }
#container .image-frame {
  display: table;
  max-width: 100%;
  margin: 1.3rem auto;
  padding: 6px;
  border: 1px solid #c9d0d3;
  background: #fff;
  box-shadow: 0 10px 22px rgb(20 43 71 / .1);
}
#container .image-frame img { display: block; max-width: 100%; height: auto; margin: 0; border: 0; }

.imgl, .imgr, #container .imgholder {
  width: fit-content;
  max-width: min(100%, 290px);
  padding: .35rem;
  border: 1px solid #c9d0d3;
  background: #fff;
  box-shadow: 0 8px 18px rgb(20 43 71 / .08);
}
.imgl { margin: 0 1.4rem 1rem 0; }
.imgr { margin: 0 0 1rem 1.4rem; }
#container .imgholder { margin: 0 0 1.2rem; }

/* Museum overview */
.museum-overview {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
}
.museum-overview .imgl { float: none; margin: 0; }
.museum-overview .imgholder { margin-bottom: 1rem; }
.museum-overview p { margin-bottom: 0; }

/* Homepage and museum listings */
#intro { display: grid; grid-template-columns: minmax(180px, .7fr) 1.3fr; gap: clamp(1.4rem, 4vw, 3.2rem); align-items: center; padding: clamp(1.8rem, 4vw, 3.2rem) 0; }
#intro .fl_left, #intro .fl_right { float: none; width: auto; }
#intro .fl_left { padding: .45rem; border: 0; background: #dfe9ef; border-radius: 2px 2px 5rem 2px; }
#intro .fl_left img { width: 100%; margin: auto; }
#intro .fl_right h2 { margin: 0 0 .8rem; padding-bottom: .65rem; border-bottom: 1px solid #b4c4d1; color: var(--ink); font-size: clamp(1.55rem, 2.5vw, 2.1rem); }
#intro .fl_right p { max-width: 62ch; margin: 0; color: var(--text); font-size: 1rem; }

#services { width: auto; margin: 0; }
#services ul { display: grid; width: min(1120px, calc(100vw - 2.5rem)); grid-template-columns: repeat(auto-fit, 250px); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
#services li, #services li.last { float: none; width: 250px; margin: 0; padding: 0; border-top: 5px solid var(--blue); background: #fff; box-shadow: 0 11px 22px rgb(20 43 71 / .07); }
#services li:nth-child(2n) { border-color: var(--green); }
#services li:nth-child(3n) { border-color: var(--ink); }
#services li div.imgholder { width: 250px; height: 100px; margin: 0; padding: 0; border: 0; background: transparent; }
#services li div.imgholder img { width: 100%; height: 100%; object-fit: cover; }
#services li h2 { margin: .9rem 1.1rem .5rem; padding: 0; border: 0; color: var(--ink); background: transparent; font-family: var(--serif); font-size: 1.2rem; font-weight: 400; line-height: 1.12; }
#services li p { margin: 0 1.1rem 1rem; color: var(--text); font-size: .9rem; }
#services p.readmore { margin: 0 1.1rem; padding: 0 0 1.2rem; border: 0; text-align: left; }
#services p.readmore a { color: var(--blue); font-size: .8rem; font-weight: 800; }

/* Tables, columns, and footer */
table { max-width: 760px; border: 1px solid #c9d0d3; font-size: .92rem; }
table thead th { padding: .75rem; border: 0; color: #fff; background: var(--ink); text-align: left; }
table tbody td { padding: .7rem; border-color: #d5dcdf; }
table tbody tr.light { color: var(--text); background: #fff; }
table tbody tr.dark { color: var(--text); background: #edf2f4; }

#content { float: none; width: auto; }
#column { float: none; width: auto; margin-top: 2rem; }
#column .holder, #column #featured { width: auto; }

#footer { padding: 2rem 0; }
#copyright { display: flex; justify-content: space-between; gap: 1rem; padding: 1.5rem 0; font-size: .76rem; }
#copyright p { margin: 0; }
#copyright .fl_left, #copyright .fl_right { float: none; }

@media (max-width: 720px) {
  #header, #topbar, #intro, #breadcrumb, #container, #footer, #copyright { width: min(1120px, calc(100% - 1.5rem)); }
  #header { padding: 1.5rem 0; }
  #header #logo h1 { font-size: 1.7rem; }

  #topbar { padding: .6rem 0; }
  .nav-toggle { display: inline-flex; align-items: center; gap: .55rem; padding: .65rem .8rem; border: 1px solid rgb(255 255 255 / .58); border-radius: 2px; color: #fff; background: transparent; font: 800 .78rem var(--sans); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
  .nav-toggle::before { content: "☰"; font-size: 1.1rem; line-height: 1; }
  #topnav { display: none; margin-top: .65rem; }
  #topbar.nav-open #topnav { display: block; }
  #topnav > ul { display: block; border-top: 1px solid rgb(255 255 255 / .35); }
  #topnav > ul > li { border-bottom: 1px solid rgb(255 255 255 / .22); }
  #topnav > ul > li > a { padding: .8rem .2rem; }
  #topnav > ul > li > a:hover, #topnav > ul > li.active > a { background: transparent; color: #d9eb93; }
  #topnav li ul { position: static; left: auto; display: none; width: auto; min-width: 0; margin: 0 0 .55rem; box-shadow: none; }
  #topnav li.subnav-open > ul { display: block; }
  #topnav li li a:link, #topnav li li a:visited, #topnav li li a:hover { padding: .58rem .85rem; background: #244672; }
  #topnav > ul > li.has-subnav { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  #topnav > ul > li.has-subnav > ul { grid-column: 1 / -1; }
  .nav-subtoggle { display: inline-grid; width: 2.4rem; height: 2.4rem; margin-right: .1rem; place-items: center; border: 1px solid rgb(255 255 255 / .45); border-radius: 2px; color: #fff; background: transparent; font-size: 1.2rem; cursor: pointer; }
  .nav-subtoggle[aria-expanded="true"] { color: #d9eb93; }

  #breadcrumb { padding: .7rem 0; }
  #breadcrumb .first { display: none; }
  #container { padding: 2rem 0; }
  div.wrapper h1 { margin-bottom: 1.05rem; font-size: clamp(1.8rem, 8.5vw, 2.35rem); }
  #intro { grid-template-columns: 1fr; gap: 1.4rem; padding: 2rem 0; }
  #intro .fl_left { max-width: 220px; }
  #intro .fl_right h2 { font-size: 1.7rem; }
  .imgl, .imgr { float: none; margin: 0 0 1.2rem; }
  .museum-overview { grid-template-columns: 1fr; gap: 0; }
  .museum-overview .imgl { margin-bottom: 1.2rem; }
  #services ul { width: calc(100vw - 1.5rem); grid-template-columns: repeat(auto-fit, 250px); }
  #copyright { display: block; }
  #copyright p + p { margin-top: .65rem; }
}

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