* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body { font-family: var(--font-display); }
a { color: inherit; text-decoration: none; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mob { display: none; }

@keyframes show { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(0.3em); } }


header { position: fixed; top: 0; left: 0; right: 0; z-index: 2; padding: 48px 48px 24px; display: flex; justify-content: flex-end; transition: opacity var(--t) var(--ease); }
header.away { opacity: 0; pointer-events: none; }
nav { flex: 1; display: flex; gap: 40px; font: 500 var(--nav-size)/1 var(--font-mono); }
.home { margin-right: auto; }
.home svg { display: block; width: 1.15em; height: 1.15em; margin-top: -0.15em; }

.link { position: relative; display: inline-block; padding-bottom: 5px; }
.link::after {
  content: ""; position: absolute; left: calc(var(--l, 0.08em) - 0.4px); right: calc(var(--r, 0.06em) - 0.4px); bottom: 0; height: var(--stroke);
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--t) var(--ease);
}
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); transform-origin: left; }


.page { position: relative; min-height: 100svh; display: flex; flex-direction: column; }
.hero { flex: 1; position: relative; padding: 0 var(--pad); display: flex; flex-direction: column; justify-content: center; }

h1 { margin: 0; font-size: var(--h1-size); line-height: var(--h1-line); font-weight: 600; letter-spacing: var(--h1-track); }
.slot { display: inline-block; height: 1.6em; margin: -0.12em 0 -0.13em; overflow: hidden; vertical-align: top; }
.track { display: block; transition: transform var(--t-roll) var(--ease); }
.track.jump { transition: none; }
.item { display: block; height: 1.6em; padding-top: 0.12em; line-height: 1.35em; white-space: nowrap; }
.box { display: inline-block; line-height: 1.04em; padding: 0.02em 0.14em 0.06em; margin-top: -0.02em; background: var(--box-bg); color: var(--box-fg); }

.cta { position: absolute; left: var(--pad); bottom: 64px; display: flex; align-items: baseline; gap: 40px; font: 500 var(--cta-size)/1 var(--font-mono); padding-bottom: 0; opacity: 0; animation: show var(--t-show) ease-out var(--delay-cta) forwards; }
.cta.in { animation: none; opacity: 1; transition: opacity var(--t) var(--ease); }
.cta::after { display: none; }
.cta .label { position: relative; display: inline-block; padding-bottom: 5px; margin-bottom: -5px; }
.cta .label::after {
  content: ""; position: absolute; left: calc(0.082em - 0.4px); right: calc(0.062em - 0.4px); bottom: 0; height: var(--stroke);
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--t) var(--ease);
}
.cta > :hover .label::after, .cta > :focus-visible .label::after { transform: scaleX(1); transform-origin: left; }
.pause { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.pause svg { width: 0.72em; height: 0.72em; margin-left: 0.45em; vertical-align: 0; }
.pause .play, .pause.paused .stop { display: none; }
.pause.paused .play { display: inline; }
.cta .arrow { display: inline-block; will-change: transform; animation: drift var(--t-drift) var(--ease-drift) var(--delay-arrow) infinite alternate; }


.dock { position: fixed; right: 48px; bottom: 56px; z-index: 3; opacity: 0; animation: show var(--t-show) ease-out var(--delay-dock) forwards; display: flex; flex-direction: row-reverse; align-items: center; gap: var(--gap); font: 500 var(--dock-size)/1 var(--font-mono); }
.dock.in { animation: none; opacity: 1; transition: opacity var(--t) var(--ease); }
.dock.in.away { opacity: 0; pointer-events: none; }

.a11y, .cube { position: relative; }
.a11y { z-index: 2; display: block; padding: 0; border: 0; background: none; color: var(--fg); font: inherit; cursor: pointer; }
.a11y .icon { display: block; padding: var(--cube-pad); background: var(--box-bg); color: var(--box-fg); line-height: 0; }
.a11y svg, .cube svg { width: var(--icon); height: var(--icon); }
.a11y .close, .dock.open .a11y svg:first-child { display: none; }
.dock.open .a11y .close { display: block; }
.cube { display: block; padding: var(--cube-pad); border: 0; background: var(--box-bg); color: var(--box-fg); font: inherit; line-height: 0; cursor: pointer; }
.a11y:focus-visible, .cube:focus-visible { outline: var(--stroke) solid var(--fg); outline-offset: 4px; }

.options { display: flex; gap: var(--gap); opacity: 0; transform: translateX(calc(var(--cube) + var(--gap))); pointer-events: none; transition: opacity var(--t-fade) var(--ease-fade), transform var(--t) var(--ease-slide); }
.up { position: absolute; right: 0; bottom: calc(100% + var(--gap)); opacity: 0; transform: translateY(calc(var(--cube) + var(--gap))); pointer-events: none; transition: opacity var(--t-fade) var(--ease-fade) var(--delay-up), transform var(--t) var(--ease-slide) var(--delay-up); }
.dock.open .options, .dock.open .up { opacity: 1; transform: none; pointer-events: auto; }

.a11y::before, .cube::before {
  content: attr(data-tip); position: absolute; right: 0; bottom: calc(100% + 0.4em);
  padding: 0.35em 0.45em 0.4em; background: var(--box-bg); color: var(--box-fg); font: 500 1em/1 var(--font-mono); letter-spacing: 0; white-space: nowrap;
  opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.dock:not(.open) .a11y::before { right: calc(100% + var(--gap)); top: 0; bottom: 0; display: flex; align-items: center; padding-top: 0; padding-bottom: 0; }
.dock.open .a11y::before { right: calc(100% + var(--gap)); }
.dock.open .a11y::before, #light::before { bottom: calc(100% + var(--gap)); }
#dys::before { right: calc(100% + var(--gap)); bottom: 0; }
.dock.open .a11y::before, .dock .cube::before { height: var(--cube); display: flex; align-items: center; padding-top: 0; padding-bottom: 0; }
.a11y.intro::before { transition-duration: var(--t-intro), var(--t-intro); }
.a11y.hint::before, .a11y:focus-visible::before, .cube:focus-visible::before, .dock.ready .cube.tip::before { opacity: 1; transform: none; }
@media (hover: hover) { .a11y:hover::before, .cube:hover::before { opacity: 1; transform: none; } }
.dock.open:not(.ready) .a11y::before, .dock.open:not(.ready) .cube::before { opacity: 0; transform: translateY(4px); }
.dock.open:not(.ready) .a11y::before { transition: none; }


.letter { max-width: calc(var(--column) + 2 * var(--pad)); padding: 96px var(--pad); }
.from { font: 500 var(--meta-size)/var(--meta-line) var(--font-mono); color: var(--fg3); }
.from p { margin: 0; }
.to { margin: var(--s-block) 0 0; font: 500 var(--meta-size)/var(--meta-line) var(--font-mono); color: var(--fg2); }
.date { margin: var(--s-block) 0 0; text-align: right; font: 400 var(--date-size)/var(--meta-line) var(--font-display); color: var(--fg3); }
.letter h2 { margin: var(--s-block) 0 0; font: 600 var(--h2-size)/var(--h2-line) var(--font-display); letter-spacing: var(--h2-track); }

.text { margin-top: var(--s-block); }
.text p, .text li { font: 400 var(--text-size)/var(--text-line) var(--font-display); color: var(--fg2); }
.text p { margin: 0 0 22px; }
.text strong { color: var(--fg); font-weight: 600; }
.asks { margin: 0 0 22px; padding: 0; list-style: none; counter-reset: a; }
.asks li { counter-increment: a; position: relative; margin: 0 0 14px; padding-left: 2em; }
.asks li::before { content: counter(a) "."; position: absolute; left: 0; font: 500 0.9em/1.85 var(--font-mono); color: var(--fg); }
.fn { position: relative; display: inline-block; padding-bottom: 0.15em; margin-left: 0.1em; font: 500 0.65em/1 var(--font-mono); color: var(--fg); }
.fn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--stroke); background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--t) var(--ease); }
.fn:hover::after, .fn:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.signers { width: 100%; margin: var(--s) 0 0; border-collapse: collapse; font: 500 var(--meta-size)/1.6 var(--font-mono); color: var(--fg2); }
.signers th { padding: 0 16px 12px 0; text-align: left; font-weight: 500; color: var(--fg3); border-bottom: 1px solid var(--line); }
.signers td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }

.logos { --t-logo: var(--logo-text); display: flex; align-items: center; gap: 48px; margin: calc(var(--s) + var(--t-logo) * 0.4085) 0 calc(var(--t-logo) * 0.4255); }
.logos img { display: block; width: auto; }
.logos .epi { height: var(--t-logo); }
.logos .c3w { height: calc(var(--t-logo) * 1.4255); margin-bottom: calc(var(--t-logo) * -0.4255); }
.logos .fsfe { height: calc(var(--t-logo) * 1.4085); margin-top: calc(var(--t-logo) * -0.4085); }

.notes { margin: var(--s) 0 0; padding: 0; list-style: none; counter-reset: n; font: 500 var(--note-size)/1.6 var(--font-mono); color: var(--fg3); }
.notes li { counter-increment: n; position: relative; padding-left: 2.4em; margin-bottom: 10px; overflow-wrap: anywhere; }
.notes li::before { content: counter(n); position: absolute; left: 0; width: 2ch; text-align: right; color: var(--fg); }
.notes a { color: var(--fg2); text-decoration: underline; }


.impressum { max-width: calc(var(--column) + 2 * var(--pad)); padding: 0 var(--pad) 96px; font: 500 var(--meta-size)/var(--meta-line) var(--font-mono); color: var(--fg3); }
.impressum.solo { display: flex; flex-direction: column; padding-top: 160px; }
.letter:focus, .page:focus { outline: none; }
.impressum.foot .credit { margin: 0; }
.impressum h1, .impressum h2 { margin: 0 0 24px; font: 600 var(--h3-size)/1.2 var(--font-display); letter-spacing: var(--h3-track); color: var(--fg); }
.impressum p { margin: 0 0 16px; }
.impressum a { color: var(--fg2); text-decoration: underline; }
.impressum .t { font: 400 var(--imprint-size)/var(--text-line) var(--font-display); color: var(--fg2); }
.impressum .t a { color: var(--fg); }
.impressum .t + p:not(.t) { margin-top: 24px; }
.impressum .credit { margin: 32px 0 0; }
.credit .heart { text-decoration: none; }
.credit svg { width: 0.9em; height: 0.9em; vertical-align: -0.08em; color: var(--fg); transition: color var(--t) var(--ease); }
.credit .heart:hover svg, .credit .heart:focus-visible svg { color: var(--heart); }


.light .logos img { filter: invert(1); }

.dys body, .dys nav, .dys .cta, .dys h1 { font-family: var(--font-dys); letter-spacing: 0; }
.dys h1 { font-weight: 700; font-size: var(--h1-dys-size); }
.dys .letter, .dys .letter *, .dys .impressum, .dys .impressum * { font-family: var(--font-dys) !important; letter-spacing: 0 !important; }


@media (max-width: 600px) {
  header { padding: 24px var(--pad) 16px; }
  nav { gap: 24px; }
  .scrolled header { background: linear-gradient(var(--bg) 40px, color-mix(in srgb, var(--bg) 85%, transparent) 52px, color-mix(in srgb, var(--bg) 55%, transparent) 66px, color-mix(in srgb, var(--bg) 20%, transparent) 80px, transparent 92px); padding-bottom: 52px; }

  h1 { font-size: calc((100vw - 2 * var(--pad)) / 5.75); line-height: 1.22; }
  .desk { display: none; }
  .mob { display: inline; }
  .slot { position: relative; display: block; margin: 0; height: 4.88em; }
  .fixed { position: absolute; top: 0; left: 0; z-index: 1; height: 1.2em; padding-right: 0.17em; background: var(--bg); }
  .fixed.mob { display: block; }
  .ph { visibility: hidden; }
  .item { height: 5.1em; padding-top: 0; line-height: 1.22em; white-space: normal; hyphens: manual; }
  .box { display: inline; padding: 0.01em 0.1em 0.02em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .dys h1 { font-size: calc((100vw - 2 * var(--pad)) / 10); line-height: 1.85; }
  .dys .slot { height: 7.4em; }
  .dys .item { height: 7.7em; line-height: 1.85em; }
  .dys .fixed { height: 1.85em; }

  .cta { bottom: 40px; gap: 24px; }
  .pause .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pause svg { margin-left: 0; }
  .dock { right: var(--pad); bottom: 33px; }
  body:has(.dock.open) .cta.in, body:has(.a11y.hint) .cta.in, body:has(.a11y:hover) .cta.in, body:has(.a11y:focus-visible) .cta.in { opacity: 0; pointer-events: none; }

  .letter { padding-top: 64px; }
  .impressum.solo { padding-top: 112px; }
  .signers thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .signers tr, .signers td { display: block; }
  .signers tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .signers td { padding: 0; border: 0; }
  .logos { flex-direction: column; align-items: flex-start; gap: 32px; margin: var(--s) 0 0; }
  .logos img { margin: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .track, .link::after, .options, .up, .a11y::before, .cube::before { transition: none; }
  .cta, .cta .arrow, .dock { animation: none !important; opacity: 1; }
}