/* WBC 101 Gallery · WP-01 · Portable, JS-free implementation */
:root {
  --wbc-blue: #314BBC;
  --wbc-orange: #E89E29;
  --wbc-gray: #596673;
  --wbc-pale: #EAEDF8;
  --masthead-height: 94px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  background: #fff;
  color: var(--wbc-gray);
  font-family: 'Figtree', Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-top: var(--masthead-height);
}
.masthead {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto 0;
  height: var(--masthead-height);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.985);
  border-bottom: 2px solid var(--wbc-pale);
}
.identity {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding-inline: 22px;
  max-width: 100%;
}
.logo-mark { height: 50px; width: auto; }
.logo-type { height: 35px; width: auto; }
.brand-divider { height: 38px; width: 1px; background: #D4D9E5; }
.visually-hidden {
  position: absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.section-intro {
  text-align: center;
  padding: clamp(44px, 6.4vw, 100px) 22px clamp(42px, 5.6vw, 90px);
  background: #fff;
}
.section-intro h2 {
  font-size: clamp(31px, 3.65vw, 58px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.035em;
  color: var(--wbc-blue);
  margin: 0;
}
.section-intro .subtitle {
  margin: 15px 0 24px;
  font-size: clamp(13px, 1.35vw, 17px);
  font-weight: 600;
  letter-spacing: .18em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--wbc-orange);
}
.section-intro .description {
  max-width: 870px;
  margin: 0 auto;
  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 400;
  line-height: 1.6;
  text-wrap: pretty;
}
.photographic-sequence { width: 100%; }
.photographic-sequence figure {
  margin: 0;
  padding: 0;
  background: #fff;
}
.photographic-sequence figure + figure { border-top: 5px solid #fff; }
.photographic-sequence img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  color: var(--wbc-gray);
}
@media (max-width: 640px) {
  :root { --masthead-height: 70px; }
  .identity { gap: 10px; padding-inline: 15px; }
  .logo-mark { height: 31px; }
  .logo-type { height: 25px; }
  .brand-divider { height: 29px; }
  .section-intro { padding: 42px 22px 41px; }
  .section-intro .subtitle { margin: 11px 0 17px; letter-spacing: .16em; }
  .section-intro .description { line-height: 1.55; }
  .photographic-sequence figure + figure { border-top-width: 3px; }
}
@media (max-width: 360px) {
  .identity { gap: 7px; }
  .logo-mark { height: 27px; }
  .logo-type { height: 22px; }
  .brand-divider { height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior:auto; }
}