/* Compact opening, readable controls and one quiet frame for every chapter. */
:root { --eon-gutter: clamp(1rem, 4.2vw, 5rem); }

/* Keep the bright invitation concise instead of stretching it across the page. */
.expo-note {
  box-sizing: border-box;
  width: min(720px, calc(100% - 2 * var(--eon-gutter)));
  margin: .95rem 0 0 var(--eon-gutter);
  padding: .68rem .95rem;
  gap: .95rem;
  align-items: center;
}
.expo-date { gap: .1rem; padding-right: .9rem; }
.expo-date strong { font-size: 1.8rem; }
.expo-date span { font-size: .78rem; }
.expo-note h2 { font-size: 1.17rem; line-height: 1.2; margin-bottom: .18rem; }
.expo-note p { font-size: .98rem; line-height: 1.35; }
.expo-mark { display: none; }

/* Shorter, clearer download library; the entire tile remains the target. */
html body .downloads-hub {
  box-sizing: border-box;
  width: min(1080px, calc(100% - 2 * var(--eon-gutter)));
  margin: 1rem auto 1.4rem;
  padding: .82rem 1rem .9rem;
}
.downloads-hub > header { margin-bottom: .55rem; padding-bottom: .5rem; }
.downloads-hub h2 { font-size: clamp(1.55rem, 1.8vw, 1.85rem); }
.downloads-hub > header p { font-size: 1rem; line-height: 1.38; }
.materials-groups { gap: .85rem; }
@media (min-width: 1101px) { .materials-groups { grid-template-columns: 1fr 1.35fr 1fr; } }
.materials-group, .materials-group:nth-child(2), .materials-group--documents { gap: .4rem; }
.materials-group h3 { font-size: 1rem; margin-bottom: .05rem; }
html body .downloads-hub a.material-row,
html body .downloads-hub a.material-row:last-child,
html body .downloads-hub .materials-group--documents a.material-row {
  min-height: 4.1rem;
  padding: .52rem .68rem;
  gap: .5rem;
}
.material-row__title { font-size: 1.08rem; line-height: 1.22; }
.material-row__meta { font-size: .88rem; line-height: 1.25; }
.material-row__arrow { font-size: 1.28rem; }

/* One translucent navy frame across all six chapters. */
html body .scroll-story .story-scene .scene-surface,
html body #kontakt.story-scene--contact .scene-surface {
  box-sizing: border-box;
  width: calc(100% - 2 * var(--eon-gutter)) !important;
  margin-inline: auto !important;
  border: 1px solid rgba(140, 202, 222, .43) !important;
  border-left: 3px solid rgba(129, 213, 235, .78) !important;
  border-radius: 5px !important;
  background: linear-gradient(125deg, rgba(7, 27, 42, .84), rgba(13, 42, 60, .76)) !important;
  box-shadow: inset 0 1px rgba(218, 246, 255, .08), 0 18px 44px rgba(0, 11, 23, .28) !important;
}

/* Larger reading text without enlarging the opening panels. */
html body .feature-block .feature-list li { font-size: clamp(1.16rem, 1.28vw, 1.3rem) !important; line-height: 1.58 !important; }
html body .film-copy > p:not(.film-kicker) { font-size: clamp(1.15rem, 1.3vw, 1.34rem) !important; line-height: 1.55 !important; }
html body .scene-copy--about .lead-copy { font-size: clamp(1.2rem, 1.75vw, 1.55rem) !important; }
html body .story-drawing b { font-size: 1.13rem !important; }
html body .story-drawing b small { font-size: .86rem !important; }
html body .story-drawings__header small { font-size: .96rem !important; }
html body .catalog-launch strong, html body .catalog-download strong { font-size: 1rem !important; }
html body .catalog-launch small, html body .catalog-download small { font-size: .89rem !important; }
html body .scene-copy--contact .contact-card .contact-card__copy > span { font-size: 1.02rem !important; }
html body .story-header-content .company-tagline { font-size: .83rem !important; }
html body .header-phones .header-office-hours { font-size: .85rem !important; }
html body .header-phones a { font-size: .94rem !important; }
html body .language-select__current { font-size: .94rem !important; }

@media (max-width: 1100px) {
  .materials-groups { gap: .8rem; }
  html body .story-header-content .company-tagline { font-size: .76rem !important; }
}
@media (max-width: 760px) {
  :root { --eon-gutter: .75rem; }
  .expo-note { margin-top: .7rem; padding: .6rem .7rem; gap: .55rem; }
  .expo-date { width: auto; flex: none; border: 0; border-right: 1px solid #c2d5dc; padding: 0 .55rem 0 0; display: grid; align-self: stretch; align-content: center; }
  .expo-date strong { font-size: 1.55rem; }
  .expo-date span { font-size: .69rem; max-width: 8ch; }
  .expo-note h2 { font-size: 1.05rem; }
  .expo-note p { font-size: .88rem; line-height: 1.3; }
  html body .downloads-hub { margin-top: .75rem; padding: .7rem .7rem .8rem; }
  .downloads-hub > header { margin-bottom: .45rem; padding-bottom: .4rem; }
  .downloads-hub h2 { font-size: 1.4rem; }
  .downloads-hub > header p { font-size: .95rem; }
  .materials-groups { gap: .65rem; }
  .materials-group, .materials-group:nth-child(2), .materials-group--documents { gap: .3rem; }
  html body .downloads-hub a.material-row,
  html body .downloads-hub a.material-row:last-child,
  html body .downloads-hub .materials-group--documents a.material-row {
    min-height: 3.9rem;
    padding: .48rem .6rem;
  }
  .material-row__title { font-size: 1.04rem; }
  .material-row__meta { font-size: .86rem; }
  html body .scroll-story .story-scene .scene-surface,
  html body #kontakt.story-scene--contact .scene-surface {
    border-left-width: 2px !important;
    border-radius: 3px !important;
  }
  html body .story-scene:not(.story-scene--film) .scene-heading h2,
  html body .story-scene--about .scene-heading h2,
  html body .story-scene--contact .scene-heading h2 {
    font-size: clamp(1.36rem, 4.8vw, 1.68rem) !important;
    line-height: 1.06 !important;
  }
  html body .feature-block .feature-list li { font-size: 1.12rem !important; line-height: 1.55 !important; }
  html body .story-header-content .company-tagline { font-size: .73rem !important; }
  html body .header-phones .header-office-hours { font-size: .76rem !important; }
  html body .header-phones a { font-size: .86rem !important; }
}
@media (max-width: 420px) {
  .expo-note { align-items: flex-start; }
  .expo-date { display: grid; }
  .expo-date strong { font-size: 1.45rem; }
  .expo-date span { font-size: .64rem; }
  .expo-note h2 { font-size: 1rem; }
  .expo-note p { font-size: .84rem; }
}


/* Place the two opening panels side by side when both stay readable. */
@media (min-width: 1200px) {
  .expo-note {
    display: inline-flex;
    box-sizing: border-box;
    width: min(360px, 28vw);
    margin: 1rem 0 1.35rem var(--eon-gutter);
    padding: .86rem 1rem;
    vertical-align: top;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
  }
  .expo-date {
    display: flex;
    width: 100%;
    padding: 0 0 .42rem;
    border: 0;
    border-bottom: 1px solid #c0d5dc;
    align-items: baseline;
    gap: .5rem;
  }
  .expo-date span { font-size: .8rem; }
  .expo-note h2 { font-size: 1.22rem; }
  .expo-note p { font-size: 1.02rem; }
  html body .downloads-hub {
    display: inline-block;
    width: calc(100% - 2 * var(--eon-gutter) - min(360px, 28vw) - 1.5rem);
    margin: 1rem 0 1.35rem 1rem;
    vertical-align: top;
  }
}