/* One variable Open Sans file (weights 400 to 700, Latin subset). Rename the file when it changes, because it is cached for a year. */
@font-face {font-family:"Open Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/open-sans-latin-400-700-v1.woff2") format("woff2");}
/* Arial resized to Open Sans metrics, so text does not shift when the web font arrives. */
@font-face {font-family:"Open Sans Fallback";font-style:normal;font-weight:400 500;src:local("Arial"),local("ArialMT"),local("Liberation Sans");size-adjust:106.02%;ascent-override:100.82%;descent-override:27.63%;line-gap-override:0%;}
@font-face {font-family:"Open Sans Fallback";font-style:normal;font-weight:600 700;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold");size-adjust:105.45%;ascent-override:101.36%;descent-override:27.78%;line-gap-override:0%;}
:root {
  --blue: #144276;
  --red: #c62127;
  --text: #333333;
  --muted: #666666;
  --line: #dfe3e7;
  --surface: #f5f6f8;
  --footer: #eff0f2;
  --blue-dark: #0e325c;
  --blue-tint: #dde3ea;
  --line-strong: #d6dadd;
  --disabled: #555555;
  --disabled-line: #777777;
  --content: 1200px;
  font-family: "Open Sans", "Open Sans Fallback", Arial, sans-serif;
  font-size: 112.5%;
  color: var(--text);
  line-height: 1.6;
  font-synthesis: none;
  background: white;
}

* { box-sizing: border-box; }
/* Short pages keep the footer at the bottom of the window. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; margin: 0; }
main { flex: 1 0 auto; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
/* The picture wrapper only chooses a source; layout rules target the img. */
picture { display: contents; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, video:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
p, ul, ol { margin: 0 0 1rem; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }
h1, h2, h3 { margin: 0 0 1rem; font-weight: 700; line-height: 1.2; letter-spacing: 0; text-wrap: balance; }
h1 { font-size: 2.66rem; color: var(--blue); }
h2 { font-size: 1.78rem; color: var(--red); }
h3 { font-size: 1.23rem; color: var(--blue); }
:where(main, .site-footer) :is(h1, h2, h3, p, li, a) { overflow-wrap: anywhere; }
address { font-style: normal; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.container { width: min(var(--content), calc(100% - 64px)); margin-inline: auto; }
.body-copy { max-width: 68ch; }
.skip-link { position: absolute; inset: 8px auto auto 16px; z-index: 5; padding: 8px 16px; background: white; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: relative; z-index: 3; background: white; border-bottom: 1px solid var(--line); overflow-x: clip; overflow-y: visible; }
.site-header::after { content: ""; position: absolute; right: -1px; top: 0; pointer-events: none; width: 96px; aspect-ratio: 113 / 124; background: url("corners.svg") no-repeat center / contain; }
.header-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 116px; padding-block: 20px; padding-inline-end: 64px; }
.brand-link { display: block; flex: 0 0 282px; }
.main-nav > ul { display: flex; align-items: center; gap: 25px; margin: 0; padding: 0; list-style: none; }
.main-nav a { display: flex; align-items: center; min-height: 44px; color: var(--text); font-size: .85rem; font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent; padding-top: 3px; white-space: nowrap; }
.main-nav a[aria-current="page"] { color: var(--blue); border-color: var(--blue); }
.nav-item-with-submenu { position: relative; }
.nav-parent { display: flex; align-items: center; min-height: 44px; border-bottom: 3px solid transparent; gap: 2px; }
.nav-parent > a { min-height: 41px; border-bottom: 0; }
.nav-item-with-submenu[data-active="true"] .nav-parent { border-color: var(--blue); }
.nav-item-with-submenu[data-active="true"] .nav-parent > a { color: var(--blue); }
.submenu-toggle { position: relative; display: flex; flex: 0 0 24px; align-items: center; justify-content: center; width: 24px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--blue); border-radius: 2px; }
/* Keeps the chevron next to its label while the tap area stays 44px wide. It extends right so it never covers the link. */
.submenu-toggle::before { content: ""; position: absolute; inset: 0 -20px 0 0; }
.submenu-toggle svg { width: 18px; height: 18px; }
.submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-submenu { position: absolute; z-index: 2; top: calc(100% + 8px); left: 0; width: max-content; min-width: 160px; margin: 0; padding: 8px; list-style: none; border: 1px solid var(--line); border-radius: 4px; background: white; }
.nav-submenu a { padding: 8px 12px; border-bottom: 0; }
/* Touch screens keep :hover after a tap, so hover styles only apply with a real pointer. */
@media (hover: hover) {
  .main-nav a:hover { color: var(--blue); border-color: var(--blue); }
  .nav-parent:hover { border-color: var(--blue); }
  .nav-parent:hover > a { color: var(--blue); }
  .nav-submenu a:hover { background: var(--surface); }
}
.nav-submenu a[aria-current="page"] { background: var(--surface); box-shadow: inset 3px 0 0 var(--blue); }
.menu-toggle { display: none; align-items: center; justify-content: center; gap: 10px; min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 4px; background: white; color: var(--blue); padding: 7px 12px; }
.menu-icon { width: 20px; display: grid; gap: 5px; }
.menu-icon span { display: block; width: 20px; height: 2px; background: currentColor; }
.menu-close-icon { display: none; flex: 0 0 20px; }
.menu-toggle[aria-expanded="true"] .menu-icon { display: none; }
.menu-toggle[aria-expanded="true"] .menu-close-icon { display: block; }
.home-welcome { max-width: 650px; }
.home-welcome h1 { max-width: 18ch; margin-bottom: 16px; }
.home-welcome .lead { max-width: 54ch; }
.lead { font-size: 1.05rem; line-height: 1.6; }
.actions { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 24px; }
.action { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; max-width: 100%; padding: 10px 20px; font-weight: 600; font-size: .89rem; text-align: center; text-decoration: none; border: 1px solid var(--blue); border-radius: 4px; background: var(--blue); color: white; }
.action:hover { background: var(--blue-dark); text-decoration: none; }
.action.secondary { color: var(--blue); background: white; }
.action.secondary:hover { background: var(--surface); }
.action:focus-visible { outline-color: var(--red); }
.external-icon { display: inline-block; flex: none; width: 1em; height: 1em; margin-left: .4em; vertical-align: -.1em; }
.hours { padding-left: 24px; border-left: 4px solid var(--blue); }
.hours :is(h2, h3) { margin-bottom: 10px; font-size: 1.2rem; color: var(--blue); }
.hours-rows { margin: 0; }
.hours-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 24px; padding-block: 4px; }
.hours-row dt { font-weight: 600; }
.hours-row dd { margin: 0; white-space: normal; font-variant-numeric: tabular-nums; }
.hours-row :is(dt, dd) { overflow-wrap: anywhere; }
.hours-notices { padding: 0; margin: 14px 0 0; font-size: .82rem; line-height: 1.55; }
.hours-notices :is(ul, ol) { margin: 0; padding-left: 20px; }
.collage-scene { --scene-width: min(1200px, calc(100vw - 64px)); --scene-side: calc((var(--scene-width) - 16px) / 3.6); --scene-center: calc(var(--scene-side) * 1.6); display: grid; grid-template-columns: minmax(0, 1fr) var(--scene-side) var(--scene-center) var(--scene-side) minmax(0, 1fr); grid-template-rows: 116px auto 116px; gap: 8px; padding-top: 24px; }
.collage-scene.hero-centered { --scene-width: 100%; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr) minmax(0, .85fr); padding-top: 0; }
.scene-welcome { grid-area: 2 / 3 / 3 / 4; padding: 20px 28px; align-self: center; }
.hero-centered .scene-welcome { grid-area: 2 / 2 / 3 / 3; min-height: 340px; max-width: 620px; width: 100%; margin-inline: auto; display: flex; flex-direction: column; justify-content: center; }
.hero-centered .scene-photo-1 { grid-area: 1 / 1 / 3 / 2; }
.hero-centered .scene-photo-2 { grid-area: 3 / 1 / 4 / 2; }
.hero-centered .scene-photo-3 { grid-area: 1 / 2 / 2 / 3; }
.hero-centered .scene-photo-4 { grid-area: 3 / 2 / 4 / 3; }
.hero-centered .scene-photo-5 { grid-area: 1 / 3 / 2 / 4; }
.hero-centered .scene-photo-6 { grid-area: 2 / 3 / 4 / 4; }
.scene-welcome h1 { max-width: none; font-size: 2rem; margin-bottom: 16px; overflow-wrap: anywhere; }
.scene-welcome .lead { font-size: 1.08rem; }
.scene-welcome .actions { gap: 10px; margin-top: 20px; }
.scene-welcome .action { padding-inline: 16px; }
.scene-photo { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.page-intro { padding-block: 48px 40px; }
.page-intro h1 { max-width: 32ch; }
.page-intro .lead { max-width: 70ch; }
.page-intro.has-image { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.page-intro.has-image > .content-image { width: 100%; }
/* Content images are 3:2, apart from the square featured projects on Home. */
.content-image img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
figcaption { margin-top: 8px; font-size: .8rem; line-height: 1.5; color: var(--muted); }
.page-section { padding-block: 48px; }
.page-section + .page-section { border-top: 1px solid var(--line); }
.section-heading { max-width: 68ch; margin-bottom: 28px; }
.section-heading:only-child { margin-bottom: 0; }
.section-heading p { max-width: 68ch; }
.split-content { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.split-content .section-heading { margin-bottom: 0; }
.split-content.image-first { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.item-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.item-grid.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.content-item { min-width: 0; }
.content-item h3 { margin-bottom: 12px; }
/* Card headings are H2s when their section has no heading, but look the same. */
.content-item > h2 { margin-bottom: 12px; font-size: 1.23rem; color: var(--blue); }
.content-item .content-image { margin-bottom: 20px; }
main[data-page="about"] #history .content-image img { object-position: 50% 30%; }
main[data-page="about"] #history .split-content { align-items: start; }
#projects-preview .content-image img { aspect-ratio: 1; object-fit: cover; }
.project-story .content-image img { aspect-ratio: 16 / 9; }
.project-story-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 64px; align-items: start; }
.project-story { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; }
.story-copy h2 { font-size: 1.4rem; color: var(--red); }
.story-copy { min-width: 0; max-width: 68ch; }
p a[href^="mailto:"] { overflow-wrap: anywhere; }
.content-item p { font-size: .94rem; }
.text-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 20px; }
.text-links a { font-weight: 600; font-size: .9rem; }
.page-closing { padding-block: 0 48px; }
.page-closing .actions { margin-top: 0; }
.jump-links { display: flex; gap: 8px 24px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; border-block: 1px solid var(--line); padding-block: 16px; }
.jump-links a { display: inline-flex; align-items: center; min-height: 32px; font-size: .85rem; font-weight: 600; }
/* Divided cards: a rule above each card, with compact lists for equipment names and tutorial links. */
.item-grid.divided { row-gap: 0; column-gap: 64px; }
.item-grid.divided > .content-item { border-top: 1px solid var(--line); padding-block: 28px; }
.item-grid.divided > .content-item > :is(h2, h3) { color: var(--red); font-size: 1.35rem; }
.item-grid.divided .content-image img { aspect-ratio: 16 / 9; }
.item-grid.divided ul { margin: 16px 0 0; padding-left: 20px; font-size: .9rem; }
.item-grid.divided li { padding-left: 4px; margin-bottom: 4px; }
.item-grid.divided li > p { margin: 0; font-size: inherit; }
.item-grid.divided li a { font-weight: 600; }
/* Photos block: one to four photos in a 16:9 shape. */
.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.photo-grid.photo-count-1 { grid-template-columns: minmax(0, 1fr); }
.photo-grid.photo-count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.photo-grid .content-image img { aspect-ratio: 16 / 9; }
.video-block { max-width: 900px; }
.faq-list { max-width: 68ch; }
.faq-item { border-top: 1px solid var(--line); padding-block: 24px; }
.faq-item h3 { font-size: 1.2rem; }
.content-item > .hours { padding: 0; border: 0; }
.content-item > .hours :is(h2, h3) { font-size: 1.23rem; margin-bottom: 12px; }
.contact-no-hours { padding-left: 16px; border-left: 4px solid var(--blue); }
.contact-no-hours > p { margin: 0; }
.contact-address { font-style: normal; }
.contact-address + .text-links { margin-top: 8px; }
.section-address { margin-bottom: 0; }
.site-footer { background: var(--footer); position: relative; margin-top: 0; }
/* Decorative bubbles above the footer. They are hidden in the markup and only shown in the wide left gutter, so they never touch content. */
.corner-bubbles { display: none; }
@media (min-width: 1840px) {
  .corner-bubbles[hidden] { display: block !important; position: absolute; left: 24px; bottom: 100%; width: clamp(240px, calc((100vw - var(--content)) / 2 - 64px), 380px); color: var(--text); pointer-events: none; }
  .corner-bubbles svg { display: block; width: 100%; height: auto; }
  .corner-bubbles .bubble { fill: var(--footer); stroke: none; }
}
.footer-inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: start; padding-block: 32px 24px; }
.footer-brand > a { display: block; width: 220px; max-width: 100%; }
.footer-brand p { font-size: .83rem; margin-top: 20px; max-width: 35ch; }
.footer-inner > * { min-width: 0; }
.footer-contact { margin-top: 20px; }
.footer-contact a { overflow-wrap: anywhere; }
.footer-contact .footer-email { font-size: .88rem; margin: 0; }
.social-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.social-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--blue); border-radius: 4px; }
.social-link:hover { background: var(--blue-tint); }
.footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; list-style: none; padding: 0; margin: 0; }
.footer-nav > li { min-width: 0; }
.footer-nav a { display: inline-block; min-height: 36px; max-width: 100%; color: var(--blue); font-size: .88rem; line-height: 1.5; font-weight: 600; text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.footer-subnav { list-style: none; margin: 0; padding: 0 0 0 16px; }
.footer-nav .footer-subnav a { min-height: 32px; font-size: .8rem; font-weight: 400; }
.footer-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; border-top: 1px solid var(--line-strong); padding-block: 16px 24px; }
.acknowledgements { max-width: 80ch; font-size: .75rem; color: var(--muted); }
.acknowledgements p { margin: 0; }
.copyright { margin: 0; font-size: .75rem; color: var(--muted); white-space: nowrap; }
section[id], article[id], main[id] { scroll-margin-top: 24px; }


@media (max-width: 1150px) {
  .header-inner { gap: 20px; }
  .brand-link { flex-basis: 238px; }
  .main-nav > ul { gap: 17px; }
  .main-nav a { font-size: .8rem; }
  .footer-inner { gap: 32px; }
}

@media (max-width: 960px) {
  .site-header::after { width: 48px; }
  .header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 96px; padding-block: 16px; padding-inline-end: 32px; }
  .brand-link { width: 248px; max-width: 100%; min-width: 0; }
  .menu-toggle { display: inline-flex; }
  .main-nav { grid-column: 1 / -1; width: 100%; }
  .main-nav > ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding-top: 8px; }
  .main-nav a { font-size: .9rem; width: 100%; padding: 8px 0; }
  .nav-parent > a { flex: 1 1 auto; min-width: 0; }
  .nav-submenu { position: static; width: 100%; min-width: 0; margin-block: 4px 8px; padding: 0 0 0 16px; border: 0; border-left: 2px solid var(--line); border-radius: 0; }
  .nav-submenu a { padding-inline: 8px; }
  .collage-scene { --scene-width: calc(100vw - 40px); display: grid; grid-template-columns: 12px repeat(2, minmax(0, 1fr)) 12px; grid-template-rows: auto 150px 130px 130px; gap: 8px; padding-top: 0; }
  .collage-scene.hero-centered { grid-template-columns: 12px repeat(2, minmax(0, 1fr)) 12px; }
  .collage-scene .scene-welcome { grid-area: 1 / 2 / 2 / 4; display: block; padding: 32px 0 20px; background: transparent; z-index: auto; }
  .hero-centered .scene-welcome { min-height: 0; }
  .collage-scene .scene-welcome h1 { font-size: 1.78rem; margin-bottom: 16px; }
  .collage-scene .scene-welcome .actions { margin-top: 20px; }
  .scene-welcome .lead { font-size: 1.05rem; }
  h1 { font-size: 2.22rem; }
  .hours { padding-left: 20px; }
  .hours-row { gap: 16px; font-size: .94rem; }
  .page-intro.has-image, .split-content { gap: 32px; }
  .item-grid { gap: 24px; }
  .item-grid.divided, .project-story-list { column-gap: 32px; }
  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .footer-navigation { grid-column: 1 / -1; }
}

@media (min-width: 701px) and (max-width: 960px) {
  .collage-scene.hero-centered { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: min(220px, calc((100vw - 8px) * .4)) auto min(180px, calc((100vw - 8px) / 3)) min(180px, calc((100vw - 8px) / 3)); }
  .hero-centered .scene-welcome { grid-area: 2 / 1 / 3 / 3; max-width: none; padding: 24px 32px; background: white; }
  .hero-centered .scene-welcome .lead { max-width: 600px; }
  .hero-centered .scene-photo-1 { grid-area: 1 / 1 / 2 / 2; object-position: 50% 25%; }
  .hero-centered .scene-photo-2 { grid-area: 1 / 2 / 2 / 3; }
  .hero-centered .scene-photo-3 { grid-area: 3 / 1 / 4 / 2; }
  .hero-centered .scene-photo-4 { grid-area: 3 / 2 / 4 / 3; }
  .hero-centered .scene-photo-5 { grid-area: 4 / 1 / 5 / 2; }
  .hero-centered .scene-photo-6 { grid-area: 4 / 2 / 5 / 3; }
}

@media (max-width: 700px) {
  .container { width: calc(100% - 40px); }
  .collage-scene.hero-centered { --scene-width: 100vw; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: max(140px, calc((100vw - 8px) * .4)) auto calc((100vw - 8px) / 3) calc((100vw - 8px) / 3); }
  .hero-centered .scene-welcome { grid-area: 2 / 1 / 3 / 3; max-width: none; padding: 24px 20px; background: white; align-self: stretch; }
  .hero-centered .scene-photo-1 { grid-area: 1 / 1 / 2 / 2; object-position: 50% 25%; }
  .hero-centered .scene-photo-2 { grid-area: 1 / 2 / 2 / 3; }
  .hero-centered .scene-photo-3 { grid-area: 3 / 1 / 4 / 2; }
  .hero-centered .scene-photo-4 { grid-area: 3 / 2 / 4 / 3; }
  .hero-centered .scene-photo-5 { grid-area: 4 / 1 / 5 / 2; }
  .hero-centered .scene-photo-6 { grid-area: 4 / 2 / 5 / 3; }
  .home-welcome h1 { font-size: 1.89rem; max-width: 20ch; }
  .lead { font-size: 1rem; }
  h1 { font-size: 1.89rem; }
  h2 { font-size: 1.5rem; }
  .page-intro { padding-block: 32px; }
  .page-intro.has-image, .split-content, .split-content.image-first { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .page-section { padding-block: 36px; }
  .section-heading { margin-bottom: 24px; }
  .item-grid, .item-grid.two-columns { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .project-story-list { grid-template-columns: minmax(0, 1fr); }
  .item-grid.divided { row-gap: 0; }
  .item-grid.divided > .content-item { padding-block: 24px; }
  .photo-grid, .photo-grid.photo-count-3 { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .faq-item { padding-block: 20px; }
  .footer-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .footer-navigation { grid-column: auto; }
  .footer-brand > a { width: 180px; }
  .footer-brand p { max-width: 50ch; }
  .footer-nav { gap: 8px 24px; }
  .footer-meta { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .copyright { white-space: normal; }
}

@media (max-width: 390px) {
  .container { width: calc(100% - 32px); }
  .site-header::after { width: 40px; }
  .header-inner { gap: 10px; min-height: 86px; padding-inline-end: 24px; }
  .brand-link { width: 100%; max-width: 204px; }
  .menu-toggle { padding-inline: 9px; font-size: .83rem; }
  .menu-icon, .menu-icon span { width: 17px; }
  .actions { gap: 12px; }
  .action { padding-inline: 16px; }
  .hero-centered .scene-welcome { padding-inline: 16px; }
  .hours { padding-left: 16px; }
  .hours-row { gap: 12px; }
}

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

@media (forced-colors: active) {
  .main-nav a[aria-current="page"], .nav-submenu a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
  .menu-icon span { background: CanvasText; }
  .ss-slide-controls button[aria-disabled="true"] { color: GrayText; border-color: GrayText; }
  .media-placeholder { border: 1px solid CanvasText; }
  .social-link:hover { outline: 1px solid LinkText; }
}

@media print {
  .menu-toggle { display: none; }
  .main-nav[hidden] { display: block !important; }
  .site-header::after, .corner-bubbles { display: none; }
  .container { width: 100%; }
  .page-section { break-inside: avoid; }
}

/* Compact footer and homepage location layout. */
.scene-photo { display: flex; flex-direction: column; overflow: hidden; }
.scene-photo img { flex: 1 1 0; width: 100%; min-height: 0; height: 100%; object-fit: cover; }
.scene-photo figcaption { flex: none; margin: 0; padding: 4px 0 0; font-size: .8rem; line-height: 1.4; }
.text-links > p { margin: 0; }
.ss-slideshow { min-width: 0; width: 100%; }
.ss-slide { margin: 0 0 1rem; }
.ss-slideshow figcaption { text-align: center; margin-top: .75rem; }
.ss-slide-controls { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: center; }
.ss-slide-controls button { min-height: 48px; padding: .5rem 1rem; border: 1px solid var(--blue); border-radius: 4px; background: white; color: var(--blue); }
.ss-slide-controls button[aria-disabled="true"] { color: var(--disabled); border-color: var(--disabled-line); cursor: default; }
.footer-logo { display: block; width: 220px; max-width: 100%; }
.footer-address { font-size: .88rem; margin-bottom: 8px; }
/* Pull the 44px icon targets left so the icons line up with the text above. */
.footer-contact .social-links { margin: 12px 0 0 -8px; }
.footer-inner > .steamspace-hours { width: 100%; }
.header-inner { flex-wrap: wrap; }
.main-nav > ul { flex-wrap: wrap; }
html:not(.navigation-enhanced) .nav-submenu { position: static; border: 0; padding-block: 0; }
/* site.js adds navigation-enhanced in <head> and navigation-ready once the menu is set up.
   In between, menus stay collapsed as the script will leave them, so nothing shifts. */
@media (max-width: 960px) { .navigation-enhanced:not(.navigation-ready) .main-nav { display: none; } }
@media (min-width: 961px) { .navigation-enhanced:not(.navigation-ready) .nav-submenu { display: none; } }
@media (max-width: 960px) {
  html:not(.navigation-enhanced) .main-nav { display: block; grid-column: 1 / -1; width: 100%; }
  .navigation-enhanced .main-nav:not([hidden]) { grid-column: 1 / -1; width: 100%; }
  .navigation-enhanced .main-nav > ul { display: grid; align-items: start; gap: 4px; }
  .navigation-enhanced .nav-submenu { position: static; margin-top: 0; border: 0; border-left: 2px solid var(--line); }
  .menu-toggle:not([hidden]) { display: flex; }
  /* Mobile menu: a plain list with dividers and a side bar for the current page. */
  .main-nav > ul, .navigation-enhanced .main-nav > ul { gap: 0; padding-top: 12px; }
  .main-nav > ul > li + li { border-top: 1px solid var(--line); }
  .main-nav a, .main-nav a[aria-current="page"], .nav-parent > a { min-height: 48px; padding: 8px 12px; border-bottom: 0; }
  .nav-parent, .nav-item-with-submenu[data-active="true"] .nav-parent { min-height: 0; border-bottom: 0; }
  /* Long labels wrap in the mobile menu instead of being cut off. */
  .main-nav a { white-space: normal; }
  .main-nav a[aria-current="page"] { background: var(--surface); box-shadow: inset 4px 0 0 var(--blue); }
  .main-nav .nav-submenu, .navigation-enhanced .nav-submenu { margin: 0 0 8px 12px; padding: 0; }
  .main-nav .nav-submenu a { min-height: 44px; font-weight: 400; }
  .nav-submenu a[aria-current="page"] { font-weight: 600; }
  .hero-centered .scene-photo-1 img { object-position: 50% 25%; }
}
@media (max-width: 700px) { .footer-logo { width: 180px; } }
.footer-inner > .hours { padding: 0; border: 0; margin: 0; }
.footer-inner > .hours h2 { font-size: 1.15rem; margin-bottom: 12px; }
.footer-inner > .hours .hours-rows { font-size: .88rem; }
.footer-inner > .hours .hours-details { margin-top: 16px; }
.hours-notices > * { margin: 0; }
.hours-notices > * + * { margin-top: 8px; }
main[data-page="home"] #location .content-image img { object-position: 50% 65%; }
@media (min-width: 701px) and (max-width: 960px) {
  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .footer-inner > .footer-navigation { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .footer-inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}


.social-link > span svg { width: 28px; height: 28px; display: block; stroke: currentColor; }

@media (min-width: 701px) {
  .footer-inner:not(:has(> .steamspace-hours:not([hidden]))) > .footer-navigation { grid-column: 2 / -1; }
}

/* Gray boxes that hold the place of photos and videos that haven't been added yet. */
.media-placeholder { width: 100%; aspect-ratio: 3 / 2; background: var(--line-strong); }
.content-item > .media-placeholder { margin-bottom: 20px; }
#projects-preview .media-placeholder { aspect-ratio: 1; }
.item-grid.divided .media-placeholder, .project-story > .media-placeholder { aspect-ratio: 16 / 9; }

/* Extra collage photos that fill the edges of wide screens. */
.scene-extra { display: none; }
.scene-extra img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1800px) {
  .collage-scene.hero-centered { grid-template-columns: minmax(0, .6fr) minmax(0, .85fr) minmax(0, 1.3fr) minmax(0, .85fr) minmax(0, .6fr); }
  .scene-extra { display: block; height: 100%; min-height: 0; aspect-ratio: auto; overflow: hidden; }
  .hero-centered .scene-welcome { grid-area: 2 / 3 / 3 / 4; }
  .hero-centered .scene-photo-1 { grid-area: 1 / 2 / 3 / 3; }
  .hero-centered .scene-photo-2 { grid-area: 3 / 2 / 4 / 3; }
  .hero-centered .scene-photo-3 { grid-area: 1 / 3 / 2 / 4; }
  .hero-centered .scene-photo-4 { grid-area: 3 / 3 / 4 / 4; }
  .hero-centered .scene-photo-5 { grid-area: 1 / 4 / 2 / 5; }
  .hero-centered .scene-photo-6 { grid-area: 2 / 4 / 4 / 5; }
  .scene-extra-1 { grid-area: 1 / 1 / 2 / 2; }
  .scene-extra-2 { grid-area: 2 / 1 / 4 / 2; }
  .scene-extra-3 { grid-area: 1 / 5 / 3 / 6; }
  .scene-extra-4 { grid-area: 3 / 5 / 4 / 6; }
}


/* Labelled social buttons on Get in Touch. */
.social-links.labelled { gap: 12px 16px; margin-top: 0; }
.social-links.labelled .social-link { width: auto; min-height: 48px; gap: 10px; padding: 8px 18px 8px 14px; border: 1px solid var(--blue); background: white; font-size: .89rem; font-weight: 600; text-decoration: none; }
.social-links.labelled .social-link:hover { background: var(--surface); }
.social-links.labelled .social-link > span svg { width: 24px; height: 24px; }
/* Match the external icon spacing on .action buttons, net of the 10px flex gap. */
.social-links.labelled .social-link > .external-icon { margin-left: calc(.4em - 10px); }

/* Get in Touch location: hours and address beside the photo. */
.visit-layout { align-items: start; }
@media (max-width: 1024px) {
  .visit-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .visit-layout > .content-image { max-width: 600px; }
}
/* Videos match the 16:9 project photos, so slides keep the same size. */
.project-video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--text); }
iframe.project-video { border: 0; }
.error-logo { display: block; width: 180px; height: auto; }
.video-link { margin: 12px 0 0; font-size: .9rem; font-weight: 600; }