/* KolKom 2026: the same lettering, river and palette as the printed materials.
   This event-specific sheet uses the template's existing extra_css hook. */
@font-face {
  font-family: "Zodiak";
  src: url("identity/Zodiak-Extrabold.otf") format("opentype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

:root {
  --sidebar-w: 344px;
  --text: #001e35;
  --text-light: #536572;
  /* Cream content, as the posters' paper; a slightly deeper cream and warm
     hairlines for the alternate surfaces. */
  --bg: #faf8f2;
  --bg-alt: #f2eee4;
  --border: #e0dccf;
  --pink: #cc6392;
  --teal: #20b6a9;
  --wordmark: url("identity/wordmark-light.svg?v=4");
  --bend: url("identity/bend-light.svg?v=11");
  --body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --text: #edf1f1;
    --text-light: #a5b6bd;
    --bg: #102b3b;
    --bg-alt: #163443;
    --border: #314b58;
    --wordmark: url("identity/wordmark-dark.svg?v=4");
    --bend: url("identity/bend-dark.svg?v=11");
  }
}
:root[data-theme="dark"] {
  --text: #edf1f1;
  --text-light: #a5b6bd;
  --bg: #102b3b;
  --bg-alt: #163443;
  --border: #314b58;
  --wordmark: url("identity/wordmark-dark.svg?v=4");
  --bend: url("identity/bend-dark.svg?v=11");
}

/* A navy sidebar (the print ink and the buildings' colour) in both themes:
   it takes the dark-mode set, so its title, bend and controls use the
   dark-mode artwork (Christoph, November 6: trial against the light sidebar,
   whose source is in design-exploration/2026-11-05/45-homepage-bend/source). */
.sidebar {
  --text: #edf1f1;
  --text-light: #a5b6bd;
  --border: #314b58;
  --wordmark: url("identity/wordmark-dark.svg?v=4");
  --bend: url("identity/bend-dark.svg?v=11");
  color: var(--text);
  background-image: none;
  box-shadow: none;
  border-right: 1px solid var(--border);
  justify-content: flex-start;
  overflow-y: auto;
}
/* The title, and one river bend entering from the sidebar's right edge, with
   IMoS standing on the year's baseline and Rosa Röhre inside the bend
   (identity/bend-*.svg, materials/website/identity-assets.py). The bend's
   picture is drawn for a 263.2 px title and scales with --title-w; its arms
   run on to the right, so the box clips them at the sidebar's (or, on phones,
   the screen's) right edge. The subtitle and date line stay in a column that
   ends 12 px before the bend's tip (picture x = 45); the bend moves right if
   that column would be narrower than the date line (--meta-end; its text is
   about 11.5 em wide, estimated at 12 em on phones, where there is room). The
   date line never wraps. */
.sidebar-top {
  --pad-top: 36px;
  --pad-x: 32px;
  --title-w: calc((var(--sidebar-w) - 2 * var(--pad-x)) * 0.94);
  --meta-end: calc(var(--pad-x) + 0.85rem * 11.5);
  --bend-left: max(calc(var(--pad-x) + var(--title-w) * 0.5775),
                   calc(var(--meta-end) + 12px - var(--title-w) * 45 / 263.2));
  --column-w: calc(var(--bend-left) + var(--title-w) * 45 / 263.2 - 12px - var(--pad-x));
  /* The picture's top edge: its y = 60 on the title's bottom edge. */
  --pic-top: calc(var(--pad-top) + var(--title-w) * (203 / 471.25 - 60 / 263.2));
  position: relative;
  min-height: 316px;
  padding: var(--pad-top) var(--pad-x) 0;
  flex-shrink: 0;
}
.acronym {
  position: relative;
  width: var(--title-w);
  aspect-ratio: 471.25 / 203;
  background: var(--wordmark) left top / contain no-repeat;
}
/* Keep the real heading and its accessible name; the visual title is its print outline. */
.acronym span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  animation: none;
  opacity: 1;
  transform: none;
}
/* The subtitle as on the main site (which hides it on phones), now in the column. */
.sidebar .subtitle {
  max-width: var(--column-w);
  margin-top: 16px;
  color: var(--text-light);
  font-size: 0.85rem;
  line-height: 1.45;
  opacity: 1;
  animation: none;
}
.sidebar .meta {
  white-space: nowrap;
  margin-top: 10px;
  color: var(--text-light);
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 1;
  animation: none;
}
.sidebar-top::after {
  content: "";
  position: absolute;
  display: block;
  /* Picture y = 60 on the title's bottom edge, x = 0 at 57.75% of the title. */
  top: var(--pic-top);
  left: var(--bend-left);
  right: 0;
  height: calc(var(--title-w) * 212 / 263.2);
  background: var(--bend) left top / auto 100% no-repeat;
  pointer-events: none;
}
/* Links on the two buildings (added by kolkom-identity.js): their boxes in the
   picture's pixels, from materials/website/identity-assets.py, placed like the
   bend itself. The picture lets pointer events through to them. */
.bend-link {
  position: absolute;
  z-index: 1;
  left: calc(var(--bend-left) + var(--title-w) * var(--x) / 263.2);
  top: calc(var(--pic-top) + var(--title-w) * var(--y) / 263.2);
  width: calc(var(--title-w) * var(--w) / 263.2);
  height: calc(var(--title-w) * var(--h) / 263.2);
  border-radius: 3px;
}
.bend-link--imos { --x: 15.21; --y: 20; --w: 65.79; --h: 40; }
.bend-link--rosa { --x: 89; --y: 85; --w: 67.2; --h: 42; }
.bend-link:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

.sidebar nav {
  margin-block: auto;
  padding: 24px 32px;
  gap: 0;
  flex-shrink: 0;
}
.sidebar nav a {
  color: var(--text-light);
  font-size: 0.9rem;
  letter-spacing: 0;
  line-height: 1.45;
  padding: 6px 0;
}
.sidebar nav a:hover,
.sidebar nav a.active { color: var(--text); padding-left: 0; }
.sidebar nav a.active { font-weight: 650; }
.sidebar nav::before { background: var(--pink); width: 3px; border-radius: 0; }
.sidebar-footer { margin: 0 32px 24px; flex-shrink: 0; }
.editions-link, .theme-toggle {
  color: var(--text-light);
  border-color: var(--border);
  letter-spacing: 0;
}
.editions-link:hover, .theme-toggle:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--teal) 8%, transparent);
  border-color: var(--text-light);
}

main { max-width: 960px; padding-inline: clamp(32px, 4vw, 56px); }
.page-section { padding-top: 36px; }
.page-section > h2,
.page-section > .section-heading {
  font-family: "Zodiak", Georgia, serif;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.3;
  padding-block: 5px 12px;
  margin-bottom: 16px;
  box-shadow: 0 1px 0 var(--border);
}
.section-heading :is(input, button, .star-view) { font-family: var(--body-font); letter-spacing: 0; }
.section-heading .star-view { line-height: 1.6; }
.btn { border-radius: 5px; padding: 8px 14px; }
.btn--accent { border-color: var(--accent); background: color-mix(in srgb, var(--pink) 5%, var(--bg)); }
.btn--accent:hover { background: color-mix(in srgb, var(--pink) 12%, var(--bg)); }
.speaker-photo { box-shadow: none; }
/* Funders' logos straight on the cream page; dark mode keeps the white panel,
   which ZIB's dark-blue logo needs. */
.sponsors-row { background: transparent; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sponsors-row { background: #fff; }
}
:root[data-theme="dark"] .sponsors-row { background: #fff; }
/* Dialog headers in the sidebar's navy, their contents in the sidebar's
   colours (Christoph, November 6). The template mixes 7 % of the sidebar
   colour into the page, which with navy on cream came out muddy. */
.speaker-dialog-header, .privacy-dialog-header, .map-dialog-header, .menu-dialog-header {
  --text: #edf1f1;
  --text-light: #a5b6bd;
  --border: #314b58;
  --primary: #faf8f2;
  --primary-light: #76d1c9;
  --accent: #e59fbe;
  background: var(--sidebar-bg);
  box-shadow: none;
}
.privacy-dialog h2, .map-dialog h2, .speaker-dialog h2, .menu-dialog h2 {
  font-family: "Zodiak", Georgia, serif;
  font-weight: 800;
  letter-spacing: -0.025em;
}
/* Day headers sit on the sidebar's navy, as on the main site. */
.day-header, .day-header-mobile { color: #faf8f2; }

@media (min-width: 769px) and (max-width: 1100px) {
  :root { --sidebar-w: 288px; }
  .sidebar-top { --pad-x: 24px; }
  .sidebar nav { padding-inline: 24px; }
  .sidebar-footer { margin-inline: 24px; }
  main { padding-inline: 28px; }
}
@media (min-width: 769px) and (max-height: 740px) {
  .sidebar-top { --pad-top: 24px; min-height: 280px; }
  .sidebar nav { padding-block: 16px; }
  .sidebar nav a { padding-block: 4px; }
  .sidebar-footer { margin-bottom: 16px; }
}
@media (max-width: 768px) {
  .sidebar { border-right: 0; border-bottom: 1px solid var(--border); overflow: visible; }
  .sidebar-top {
    --pad-top: calc(28px + env(safe-area-inset-top));
    --pad-x: 24px;
    --title-w: min(198.4px, calc((100vw - 48px) * 0.8 - 35.2px));
    --meta-end: calc(var(--pad-x) + 0.8rem * 12);
    /* The picture beside the title, where the river leaves through the
       screen's edge (as through the sidebar's on desktop): from IMoS's left
       edge (picture x = 15.2) it fills the right two thirds of the free space
       after "Kombinatorik" (0.865 of the title's width), but never so far right
       that Rosa Röhre is cut off (picture x = 160 at the edge) nor so far left
       that the arms run on straight for more than 48 picture px. Up beside the
       title: 8 px below its top, which keeps the upper arm about 13-15 px below
       the day/night button. The header is as tall as the picture. */
    --line2-end: calc(var(--pad-x) + var(--title-w) * 0.865);
    --bend-left: clamp(calc(100% - var(--title-w) * 208 / 263.2),
                       calc(var(--line2-end) + (100% - var(--line2-end)) / 3 - var(--title-w) * 15.2 / 263.2),
                       calc(100% - var(--title-w) * 160 / 263.2));
    --pic-top: calc(var(--pad-top) + 8px);
    padding: var(--pad-top) var(--pad-x) 16px;
    min-height: calc(var(--pic-top) + var(--title-w) * 212 / 263.2 + 8px);
    text-align: left;
  }
  .sidebar .meta { margin-top: 12px; font-size: 0.8rem; }
  .sidebar-footer { margin: 0; }
  .header-collapsed { color: var(--text); box-shadow: 0 1px 0 var(--border); }
  .header-collapsed .collapsed-title {
    font-family: "Zodiak", Georgia, serif;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--text);
  }
  main { padding-inline: 24px; }
  .page-section { padding-top: 28px; }
  .page-section > h2,
  .page-section > .section-heading { font-size: 1.5rem; }
  footer, footer a, .footer-dialog-link { color: var(--text-light); }
  footer a:hover, .footer-dialog-link:hover { color: var(--text); }
}
/* Narrow phones: 6 px lower, so IMoS keeps clear of the day/night button. */
@media (max-width: 359px) {
  .sidebar-top { --pic-top: calc(var(--pad-top) + 14px); }
}
@media (forced-colors: active) {
  .acronym { background: none; aspect-ratio: auto; font-family: Georgia, serif; font-size: 1.5rem; }
  .acronym span { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; }
  .sidebar-top::after, .bend-link { display: none; }
}