@font-face {
  font-family: "Subfutur-Roman";
  src:
    url("FONT/Subfutur-Roman.woff2") format("woff2"),
    url("FONT/Subfutur-Roman.woff") format("woff"),
    url("FONT/Subfutur-Roman.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #000000;
  --fg: #cfcfcf;
  --menu-font-size: clamp(16px, 4.8vw, 27px);
}

:root {
  --bg: #000000;
  --fg: #cfcfcf;
  --menu-font-size: clamp(16px, 4.8vw, 27px);
}

:root {
  --bg: #000000;
  --fg: #b4b4b4;
  /* Fixed sizing as requested (mobile-first). */
  --menu-font-size: clamp(16px, 5.5vw, 24px);
  --story-font-size: 18px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

html[data-theme="light"] {
  --bg: #ffffff;
  --fg: #9c9c9c;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  text-align: center;
  font-family: "Subfutur-Roman", "Times New Roman", Times, serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  --bottom-toolbar-space: 16px; /* extra room for mobile browser UI (bottom) */
}

/* Modern dynamic viewport height */
@supports (height: 100dvh) {
  .page {
    min-height: 100dvh;
  }
}

/* Small viewport baseline (toolbar visible state) */
@supports (height: 100svh) {
  .page {
    min-height: 100svh;
  }
}

.header {
  padding: calc(16px + env(safe-area-inset-top)) 16px 10px;
}

.title {
  margin: 0;
  padding-top: 16px;
  font-weight: 400;
  font-size: var(--menu-font-size);
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.main {
  flex: 1;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-main .menu {
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.menu-link {
  color: inherit;
  text-decoration: none;
  font-size: var(--menu-font-size);
  line-height: 1;
  padding-bottom: 2px;
  border-radius: 0;
}

.menu-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.footer {
  padding: 2px 16px calc(16px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

/* Apply extra bottom room to landing/footer too */
.page:not(.story-page) .footer {
  padding-bottom: calc(4px + env(safe-area-inset-bottom) + var(--bottom-toolbar-space));
}

.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
}

.theme-toggle {
  display: flex;
  flex-direction: row-reverse; /* SUN should appear left of MOON */
  justify-content: center;
  align-items: center;
  gap: 14px;
}

.theme-toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  color: inherit;
  line-height: 0;
  cursor: pointer;
}

.theme-toggle button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
  border-radius: 999px;
}

.theme-toggle svg {
  width: 46px;
  height: 46px;
  display: block;
}

/* Default: dark mode */
.icon-moon path {
  fill: var(--fg);
}
.icon-sun path {
  fill: none;
  stroke: var(--fg);
  stroke-width: 10;
  stroke-linejoin: round;
  stroke-linecap: round;
}

html[data-theme="light"] .icon-sun path {
  fill: var(--fg);
  stroke: none;
}
html[data-theme="light"] .icon-moon path {
  fill: none;
  stroke: var(--fg);
  stroke-width: 10;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.story-page .theme-toggle {
  width: auto;
  justify-content: flex-start;
  align-self: flex-start;
  margin-left: -4px;
  transform: translateY(8px); /* closer to bottom, without moving SCHLIESSEN */
}

.page:not(.story-page) .theme-toggle {
  transform: translateY(-8px); /* landing icons slightly higher */
}

.story-footer-top {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* left / centered / right */
  align-items: end; /* align SCHLIESSEN + A buttons at the bottom */
  padding-top: 4px; /* reduce excessive top padding */
}

.story-footer-top > * {
  align-self: end;
}

.story-footer-top .theme-toggle {
  grid-column: 1;
  justify-self: start;
}

.story-footer-top .story-close--inline {
  grid-column: 2;
  justify-self: center;
}

.story-footer-top .story-font-controls {
  grid-column: 3;
  justify-self: end;
  margin-left: 0; /* grid handles right alignment */
}

.story-close--inline {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: flex-end;
}

.footer-link {
  color: inherit;
  text-decoration: none;
  font-size: clamp(7px, 2.25vw, 9px); /* 50% smaller than before */
  letter-spacing: 0.02em;
}

.footer-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.story-wrap {
  width: min(640px, 100%);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  /* Reserve space for the fixed header + fixed story headline.
     This keeps the scrollable viewport below the headline so text
     cannot move underneath it while scrolling. */
  padding-top: calc(var(--story-content-top) - 16px);
}

.story-headline {
  margin: 0;
  font-family: "Subfutur-Roman", "Times New Roman", Times, serif;
  font-size: var(--menu-font-size);
  line-height: 1.15;
  font-weight: 400;
  text-align: center;
  padding: 18px 16px;
}

.story-text {
  margin: 0;
  font-family: "Times New Roman", Times, serif; /* story text is Times per spec */
  font-size: var(--story-font-size);
  line-height: 1.2;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
}

.story-text--subfutur {
  font-family: "Subfutur-Roman", "Times New Roman", Times, serif;
}

.story-text--choral {
  /* Match story headline: same size token + line-height (optical match vs other stories) */
  font-size: var(--menu-font-size) !important; /* beats stray inline from older story-font.js */
  line-height: 1.15;
  text-align: center;
}

.story-paragraph {
  white-space: normal;
}

.story-center-section {
  text-align: center;
  white-space: normal;
}

.story-subheadline {
  font-family: "Subfutur-Roman", "Times New Roman", Times, serif;
  font-weight: 400;
}

/* Links section at the end of story texts */
.story-links {
  margin-top: 16px;
  white-space: normal; /* override .story-text pre-wrap */
  word-break: break-word;
  text-align: center;
}

.story-links-heading {
  font-family: "Subfutur-Roman", "Times New Roman", Times, serif;
  font-weight: 400;
  font-size: calc(var(--story-font-size) * 0.8); 
  display: block;
  margin-bottom: 2px;
  margin-top: 16px;
  text-align: center;
}

.story-link {
  color: inherit;
  text-decoration: none;
  display: block;
  word-break: break-word;
  text-align: center;
  font-size: calc(var(--story-font-size) * 0.8); 
}

.story-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 6px;
}

/* Inline author link inside the centered credits lines */
.story-author-link {
  color: inherit;
  text-decoration: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.story-font-controls {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-left: auto; /* push to the right side of the story footer row */
  align-self: flex-end;
}

.story-font-controls button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  color: var(--fg);
  cursor: pointer;

  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  line-height: 0;
}

.story-font-controls button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 6px;
}

.font-a-icon {
  display: block;
  width: 14px;
  height: 14px;
  fill: var(--fg);
  transform: translateY(-6px);
}

#font-a-bigger .font-a-icon {
  width: 22px; /* 25% bigger than 20px */
  height: 22px;
}

.story-page {
  /* Use viewport units that respond better to mobile browser toolbars. */
  height: 100vh; /* fallback */
  min-height: 100vh; /* fallback */
  --bottom-toolbar-space: 16px; /* extra room when browser overlays bottom */
  overflow: hidden; /* keep header/headlines fixed while inner scroll happens */
  /* Keep story text visible: scroll area starts below fixed headline. */
  --story-content-top: calc(
    (16px + env(safe-area-inset-top)) +
      (var(--menu-font-size) * 1.15) +
      48px
  );
}

/* Modern dynamic viewport height */
@supports (height: 100dvh) {
  .story-page {
    height: 100dvh;
  }
}

/* Small viewport height baseline (toolbar visible state) */
@supports (height: 100svh) {
  .story-page {
    min-height: 100svh;
  }
}

.story-main {
  padding: 0;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
}

.story-page .header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
}

.story-page .story-headline {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  left: 0;
  right: 0;
  z-index: 31;
}

.story-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Top padding is now a normal in-flow breathing space.
     The actual headline offset is handled by `.story-wrap` padding. */
  padding: 8px 16px calc(12px + var(--bottom-toolbar-space));
  min-height: 0;
}

/* Keep bottom footer area visible when browser toolbar overlays */
.story-page .footer {
  padding-bottom: calc(4px + env(safe-area-inset-bottom) + var(--bottom-toolbar-space));
}

.story-scroll--choral {
  display: flex;
  align-items: center; /* vertically centered in the scroll area */
  justify-content: center;
}

.story-close {
  padding: 24px 16px 6px; /* more space above SCHLIESSEN */
  display: flex;
  justify-content: center;
  align-items: center;
}

.close-link {
  color: inherit;
  text-decoration: none;
  font-family: "Subfutur-Roman", "Times New Roman", Times, serif;
  font-size: calc(var(--story-font-size) * 0.8);
  letter-spacing: 0.02em;
  line-height: 1;
  display: block;
}

.close-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

@media (min-width: 900px) {
  /* Desktop: more horizontal margin; mobile rules unchanged (below this breakpoint). */
  .page {
    width: 100%;
    padding-left: clamp(140px, 18vw, 520px);
    padding-right: clamp(140px, 18vw, 520px);
    /* Same list/title/headline scale on landing and story pages */
    --menu-font-size: clamp(24px, 2.2vw, 36px);
  }

  /* Match fixed story layers to the same desktop side insets as `.page`. */
  .story-page .header,
  .story-page .story-headline {
    left: clamp(140px, 18vw, 520px);
    right: clamp(140px, 18vw, 520px);
  }

  /* Keep desktop horizontal spacing identical between landing and story pages. */
  .landing-main {
    padding: 0;
  }

  .landing-main .menu {
    width: 100%;
  }

  /* Story headlines: same token as landing menu list / title */
  .story-headline {
    font-size: var(--menu-font-size);
  }

  /* Let story content use the full desktop page column */
  .story-wrap {
    width: 100%;
  }

  /* Remove extra inner side inset on story text so desktop side space
     matches landing content width more closely. */
  .story-scroll {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (min-width: 1600px) {
  /* Very wide desktop: extra side space (desktop only). */
  .page {
    padding-left: 520px;
    padding-right: 520px;
  }

  .story-page .header,
  .story-page .story-headline {
    left: 520px;
    right: 520px;
  }
}