/* Audit corrections: contrast, readable alternatives and content reflow. */
html { scroll-padding-top: max(var(--header, 106px), calc(var(--site-header, 100px) + 16px)); }
main, section, .panel, .intro, .contact-panel { min-width: 0; }
a, button, summary { overflow-wrap: anywhere; }
.button:focus-visible, .nav-contact:focus-visible { box-shadow: 0 0 0 3px #030608; }
.skip { max-width: calc(100% - 20px); }
.skip:focus { z-index: 100; }
#main-content:focus, main.case:focus { outline: none; }
.chapter, #contact, #studio { scroll-margin-top: calc(var(--site-header, 100px) + 16px); }
.contact-panel p { font-size: var(--type-body); }
.contact-panel > a:not(.button), .case .actions > a { display: inline-flex; align-items: center; min-height: 44px; }
footer p { margin-bottom: 12px; }
.case details li { margin: 20px 0 28px; }
/* Full-stage scrim: contrast over bright water without a box behind the hero. */
.opening-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, #000a 0%, #000a calc(var(--content-inset, 24px) + min(780px, 75vw)), #0000 100%);
}
#opening .intro, #opening .intro p { color: #fff; }
html[data-route='static'] .chapter .panel, html[data-route='static'] #contact .contact-panel {
  max-height: none !important; overflow: visible; opacity: 1; transform: none;
}
html[data-route='static'] .chapter .panel > p:not([data-review-only]) { display: block; }
html[data-route='static'] .reveal-char, html[data-route='static'] .product-brand img {
  animation: none !important; opacity: 1 !important; transform: none !important;
}
html[data-route='static'] .reveal-char { filter: none !important; }
/* Stacked content for phones, small tablets, and short/zoomed viewports. */
@media (max-width: 900px), (max-height: 600px) {
  :root { --reading-gutter: clamp(16px, 4vw, 32px); }
  html[data-route='static'] #poc-bar { display: none !important; }
  html[data-route='static'] .opening-stage {
    position: relative; min-height: 100svh; padding: max(136px, calc(var(--header) + 24px)) var(--reading-gutter) 56px;
  }
  #opening .intro {
    width: 100%; max-width: 780px; padding: 0; border: 0; border-radius: 0;
    background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  #opening .intro p { font-size: var(--type-body); max-width: 52ch; }
  .opening-stage::after { background: #000a; }
  .cinema-message-slot { display: none; }
  html[data-route='static'] .chapter .stage, html[data-route='static'] .chapter#art .stage {
    display: flex; flex-direction: column; align-items: stretch; gap: 24px;
    padding: 48px var(--reading-gutter); min-height: 0; height: auto; background: var(--ground);
  }
  html[data-route='static'] .chapter .stage > .world, html[data-route='static'] .chapter#art .stage > .world {
    position: relative; inset: auto; order: 0; z-index: 0;
    width: 100%; height: auto; min-height: 0; max-height: none; aspect-ratio: 16 / 9;
  }
  html[data-route='static'] .chapter .stage > .world img {
    display: block; width: 100%; height: 100%; object-fit: contain; object-position: center;
  }
  html[data-route='static'] .chapter .panel {
    position: relative; order: 1; width: 100%; max-width: none; margin: 0;
    padding: 24px; display: block; border-radius: 24px;
  }
  html[data-route='static'] .chapter .panel > p, html[data-route='static'] .contact-panel > p {
    font-size: var(--type-body); line-height: 1.55; margin-bottom: 20px;
  }
  html[data-route='static'] .chapter .panel .credit { font-size: var(--type-small); }
  .chapter .panel h2.product-brand { min-height: 0; margin-bottom: 24px; }
  .chapter .panel .product-brand img { width: min(100%, 220px); max-height: 66px; }
  .chapter#art .panel .product-brand img { max-height: 118px; }
  .panel .button, .contact-panel .button { font-size: var(--type-small); max-width: 100%; }
  .statement, #studio { padding: 80px var(--reading-gutter); min-height: 60svh; }
  #studio > p { font-size: var(--type-body); }
  html[data-route='static'] #contact { display: block; padding: 64px var(--reading-gutter); min-height: 0; }
  html[data-route='static'] .contact-stage { display: block; min-height: 0; }
  html[data-route='static'] #contact .contact-panel { width: 100%; padding: 24px; }
  main.case { padding: max(128px, calc(var(--header) + 24px)) var(--reading-gutter) 64px; }
  footer { padding: 40px var(--reading-gutter); }
  .project-navigation .nav-contact, .project-navigation summary { font-size: var(--type-small); }
}
/* Allow enlarged navigation text to wrap instead of colliding with the logo. */
@media (max-width: 1179px) {
  header { flex-wrap: wrap !important; }
  header .project-navigation { flex: 1 1 max-content; flex-wrap: wrap !important; }
  .project-navigation a, .project-navigation summary { white-space: normal; }
  .project-navigation .project-menu-list { max-height: max(120px, calc(100svh - var(--header) - 24px)); }
  .project-menu-list a[data-project] { overflow-wrap: anywhere; }
}
@media (max-height: 600px) { header.glass { position: absolute; } }
@media (forced-colors: active) {
  header .brand img { display: none; }
  header .brand::after { content: "By Design Labs"; color: LinkText; font-size: 1rem; }
  .glass, .journey-glass, .project-menu-list { border: 1px solid CanvasText !important; }
  .glass::before, .glass::after, .journey-glass::before, .journey-glass::after { display: none; }
  .glass, .project-menu-list, .journey-glass { background: Canvas !important; color: CanvasText !important; }
  a:focus-visible, button:focus-visible, summary:focus-visible { outline-color: Highlight; }
}