/* Layout: 1920px Figma desktop grid, scaled fluidly via --u (1 design px). Light by default, dark via tokens below. */
:root {
  color-scheme: light;
  --u: min(calc(100vw / 1920), 1px);
  --bg: #ededed;
  --bar: #f6f6f6;
  --ink-muted: #7f7f7f;
  --line: #d9d9d9;
  --blue: #0124f1;
  --on-blue: #ffffff;
  --tile-grey: #ffffff;
  --tile-sky: #eef6ff;
  --tile-cream: #fff8eb;
  --salut: #538bca;
  --blue-deep: #0019b0;
  --card: #ffffff;
  --tile-phone: #ffffff;
  --pill-bg: #000000;
  --pill-ink: #ffffff;
  --veil: rgba(255, 255, 255, .6);
  --cover-ph: #dddddd;
  --cover-shadow: rgba(46, 28, 0, .16);
  --photo-shadow: rgba(30, 70, 130, .12);
  --font-ui: "Akkurat LL", "Akkurat", "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --gutter: calc(80 * var(--u));
  --gap: calc(60 * var(--u));
  --radius: calc(60 * var(--u));
}
/* Dark mode: follows the system unless the visitor picked a theme with the switch in the header (data-theme on <html>) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d0d11;
    --bar: #16161b;
    --ink-muted: #a6a6ad;
    --line: #2b2b33;
    --blue: #0124f1;
    --blue-deep: #2f49d8;
    --tile-grey: #18181d;
    --tile-sky: #111a27;
    --tile-cream: #1e1910;
    --salut: #86b4ec;
    --card: #15151a;
    --tile-phone: #15151a;
    --pill-bg: #ffffff;
    --pill-ink: #000000;
    --veil: rgba(8, 8, 12, .62);
    --cover-ph: #2a2a30;
    --cover-shadow: rgba(0, 0, 0, .45);
    --photo-shadow: rgba(0, 0, 0, .35);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d0d11;
  --bar: #16161b;
  --ink-muted: #a6a6ad;
  --line: #2b2b33;
  --blue: #0124f1;
  --blue-deep: #2f49d8;
  --tile-grey: #18181d;
  --tile-sky: #111a27;
  --tile-cream: #1e1910;
  --salut: #86b4ec;
  --card: #15151a;
  --tile-phone: #15151a;
  --pill-bg: #ffffff;
  --pill-ink: #000000;
  --veil: rgba(8, 8, 12, .62);
  --cover-ph: #2a2a30;
  --cover-shadow: rgba(0, 0, 0, .45);
  --photo-shadow: rgba(0, 0, 0, .35);
}
* { box-sizing: border-box; }
html, body { background: var(--bg); }
body { margin: 0; color: var(--ink-muted); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }

.page { max-width: 1920px; margin: 0 auto; display: flex; flex-direction: column; gap: calc(100 * var(--u)); }

/* Pills (header + footer) */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: calc(8 * var(--u)) calc(16 * var(--u));
  border: calc(2 * var(--u)) solid transparent; border-radius: 999px;
  font-size: 14px; line-height: 0.95;
  color: inherit; text-decoration: none; white-space: nowrap;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.pill--outline { border-color: var(--line); padding-inline: calc(18 * var(--u)); padding-block: calc(10 * var(--u)); }
.pill--wide { padding-inline: calc(24 * var(--u)); }
.pill:hover, .pill:focus-visible { border-color: currentColor; }
.pill:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.pill--plain:hover { border-color: transparent; }
.merci { position: relative; }
.heart { position: absolute; left: 50%; top: 0; width: calc(34 * var(--u)); height: calc(34 * var(--u));
  min-width: 16px; min-height: 16px; color: #f0147f; pointer-events: none;
  animation: heart-pop 1.1s cubic-bezier(.2,.8,.3,1) forwards; }
.heart svg { width: 100%; height: 100%; display: block; }
@keyframes heart-pop {
  0%   { transform: translate(-50%, 0) scale(.2); opacity: 0; }
  20%  { transform: translate(-50%, -60%) scale(1.25); opacity: 1; }
  35%  { transform: translate(-50%, -80%) scale(.95); }
  50%  { transform: translate(-50%, -95%) scale(1.1); }
  100% { transform: translate(calc(-50% + var(--dx, 0px)), -260%) scale(.9) rotate(var(--rot, 0deg)); opacity: 0; }
}
/* Theme switch: a round outlined button next to Kontakt (same height as the pill); a sun whose rays pull in while a second circle carves it into a moon */
.theme { box-sizing: content-box; position: relative; width: 13.3px; height: 13.3px; padding: calc(10 * var(--u)); flex: none; background: none; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.theme svg { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; display: block; overflow: visible; transition: transform .6s cubic-bezier(.3,1.4,.5,1); }
.theme__rays { transform-box: fill-box; transform-origin: center; transition: transform .45s cubic-bezier(.3,1.4,.5,1), opacity .25s ease; }
.theme__cut { transition: transform .45s cubic-bezier(.3,1,.4,1); }
.theme__orb { transform-box: view-box; transform-origin: 12px 12px; transition: transform .45s cubic-bezier(.3,1.4,.5,1); }
.theme:hover svg { transform: rotate(30deg); }
:root[data-theme="dark"] .theme svg { transform: rotate(-20deg); }
:root[data-theme="dark"] .theme:hover svg { transform: rotate(-50deg); }
:root[data-theme="dark"] .theme__rays { transform: scale(.4) rotate(45deg); opacity: 0; }
:root[data-theme="dark"] .theme__cut { transform: translate(-9.5px, 5.5px); }
:root[data-theme="dark"] .theme__orb { transform: scale(1.5); }
/* switching themes: the new look cross-fades over the old one (View Transitions); elsewhere colours simply fade */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.theme-fade, .theme-fade * { transition: background-color .4s ease, border-color .4s ease, color .4s ease, fill .4s ease, stroke .4s ease !important; }

.bar {
  position: relative; height: calc(176 * var(--u));
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--gutter);
  background: var(--bar);
}
.site-header { border-radius: 0 0 calc(70 * var(--u)) calc(70 * var(--u)); }
.site-footer { border-radius: calc(70 * var(--u)) calc(70 * var(--u)) 0 0; }
.bar nav { display: flex; align-items: center; gap: calc(16 * var(--u)); }
.star {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: calc(36 * var(--u)); height: calc(36 * var(--u)); display: block; color: var(--blue);
  transition: rotate .6s cubic-bezier(.2,.8,.2,1);
}
.star svg { width: 100%; height: 100%; display: block; }
/* the header star stays where it is while the page scrolls (it is the link back to the top); above the tiles, below the overlays */
.site-header .star { position: fixed; top: calc(88 * var(--u)); z-index: 50; }
.star:hover { rotate: 90deg; }
.star--3d { perspective: calc(220 * var(--u)); }
.star--3d:hover { rotate: none; }
.star3d { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d;
  animation: star-spin 6s linear infinite; }
.star3d svg { position: absolute; inset: 0; color: var(--blue-deep);
  transform: translateZ(calc((var(--i) - 7.5) * 0.48 * var(--u))); backface-visibility: visible; }
.star3d svg.face { color: var(--blue); }
.star--3d:hover .star3d { animation-duration: 2.4s; }
@keyframes star-spin {
  from { transform: rotateX(-12deg) rotateY(0deg); }
  to   { transform: rotateX(-12deg) rotateY(360deg); }
}

/* Card stack (Figma frames 13, 1, 2, 3): four glass-star cards, blue on top, the others peeking out underneath.
   Swiping left or right (or a click) sends the top card flying off; it comes back in at the bottom of the stack. */
.tile--stack { padding: 0; border: 0; width: 100%; font: inherit; background: var(--tile-grey); cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.tile--stack:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.stk { position: absolute; inset: 0; display: block; }
/* the tile takes on a light tint of the card on top */
.tile--stack { --tint: var(--tile-grey); background: color-mix(in oklab, var(--tile-grey) 80%, var(--tint)); transition: background-color .6s cubic-bezier(.2,.8,.2,1); }
.stk__card { --f: 0deg; position: absolute; left: 11%; top: 5%; width: 78%; aspect-ratio: 539.3 / 550; display: block;
  border-radius: 11.1% / 10.9%; transform-style: preserve-3d; transform-origin: 50% 100%;
  transform: perspective(1400px) translateY(calc(var(--d) * 3.8%)) scale(calc(1 - var(--d) * .055)) rotateY(var(--f));
  z-index: calc(10 - var(--d)); user-select: none; -webkit-user-select: none; pointer-events: none;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .35s ease; }
.stk__card.is-flipped { --f: 180deg; }
/* front: the Figma render; back: one article of the Kölsches Grundgesetz on the card's colour */
.stk__face, .stk__back { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; display: block;
  -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(10, 10, 60, .18); }
.stk__back { transform: rotateY(180deg); background: var(--c); color: var(--ink); padding: 11%; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: space-between; text-align: left; }
.stk__no { font-size: max(12px, calc(17 * var(--u))); line-height: 1.3; opacity: .75; }
.stk__said { display: flex; flex-direction: column; gap: .5em; }
.stk__text { font-family: var(--font-display); font-weight: 700; font-size: max(20px, calc(40 * var(--u))); line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }
@media (hover: hover) { .tile--stack:hover .stk__card.is-top { transform: perspective(1400px) translateY(-1.5%) rotate(-1.5deg) rotateY(var(--f)); } }
/* ---- Sonnenlauf: iPhone home screen with the Sonnenlauf widget (Figma "Sonne" 853:1183), running through a day ---- */
.tile--snl { padding: 0; border: 0; font: inherit; color: inherit; width: 100%; cursor: pointer; background: var(--tile-grey); -webkit-tap-highlight-color: transparent; }
.tile--snl:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
/* the phone is drawn at iPhone size (390 × 844 pt screen) and scaled to the tile by JS (--s); its lower part runs off the tile */
.ip { position: absolute; left: 50%; top: 9%; width: 414px; height: 868px; transform: translateX(-50%) scale(var(--s, .75)); transform-origin: 50% 0;
  border-radius: 64px; background: #0e0e10; box-shadow: inset 0 0 0 2px #46464b, inset 0 0 0 4px #1b1b1d, 0 30px 60px -20px rgba(20, 20, 40, .35); pointer-events: none; }
.ip__screen { position: absolute; inset: 12px; border-radius: 52px; overflow: hidden;
  background: linear-gradient(180deg, var(--wa, #e6eefb) 0%, var(--wb, #dfe8f5) 100%); font-family: -apple-system, 'SF Pro Text', 'SF Pro Display', BlinkMacSystemFont, 'Helvetica Neue', 'Inter', system-ui, sans-serif; color: #111; }
.ip__bar { position: absolute; left: 0; right: 0; top: 0; height: 54px; }
.ip__island { position: absolute; left: 50%; top: 11px; width: 124px; height: 36px; margin-left: -62px; border-radius: 20px; background: #000; }
.ip__clock { position: absolute; left: 52px; top: 18px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ip__stat { position: absolute; right: 30px; top: 19px; display: flex; gap: 6px; align-items: center; fill: currentColor; color: #111; }
.ip__w { position: absolute; display: block; }
.ip__w--m { left: 0; top: 0; width: 338px; height: 158.6px; transition: opacity .5s ease; }
.ip__w--s { left: 0; top: 0; width: 158px; height: 158px; opacity: 0; transition: opacity .5s ease; }
/* the Sonnenlauf widget switches between its large and its small size like an iOS widget being resized: the slot narrows, the large layout fades into the small one,
   and the music widget moves up next to it; the cycling widget below stays put */
/* the slot keeps the large size; the small size is a clip (no layout work while it animates, so the resize stays smooth) */
.ip__sl { position: absolute; left: 26px; top: 66px; width: 338px; height: 158.6px; clip-path: inset(0 0 0 0 round 22.5px); will-change: clip-path, transform;
  transition: clip-path .7s cubic-bezier(.34,1.18,.5,1), transform .3s cubic-bezier(.2,.8,.2,1); z-index: 3; transform-origin: 169px 79px; }
.ip__sl .sw { box-shadow: none; }
.ip__screen.is-small .ip__sl { clip-path: inset(0 180px .6px 0 round 22.5px); transform-origin: 79px 79px; }
.ip__screen.is-small .ip__w--m { opacity: 0; }
.ip__screen.is-small .ip__w--s { opacity: 1; }
.ip__screen.is-small .ip__music { transform: translate(180px, -180px); }
.ip__screen.is-small .ip__ride { transform: translateY(-180px); }
.ip__w--m .sw { transform: scale(.39243); }
.ip__w--s .sw { transform: scale(.39080); }
.ip__music { will-change: transform; text-align: left; position: absolute; left: 26px; top: 246px; transition: transform .7s cubic-bezier(.34,1.18,.5,1), filter .3s ease, opacity .3s ease; width: 158px; height: 158px; border-radius: 22px; box-sizing: border-box; padding: 14px;
  background: linear-gradient(160deg, #1d3fa8 0%, #12204f 55%, #121212 100%); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.12); overflow: hidden; }
.ip__cover { display: block; width: 64px; height: 64px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.ip__eq { position: absolute; right: 16px; top: 16px; display: flex; gap: 3px; align-items: flex-end; height: 16px; }
.ip__eq i { width: 3px; height: 100%; border-radius: 2px; background: #1ed760; transform-origin: 50% 100%; animation: ip-eq 1s ease-in-out infinite; }
.ip__eq i:nth-child(2) { animation-delay: -.35s; } .ip__eq i:nth-child(3) { animation-delay: -.7s; }
@keyframes ip-eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.ip__track { display: block; margin-top: 12px; font-size: 14px; font-weight: 600; line-height: 1.15; }
.ip__artist { display: block; font-size: 11.5px; line-height: 1.3; color: rgba(255,255,255,.65); white-space: nowrap; }
.ip__prog { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.22); overflow: hidden; }
.ip__prog i { display: block; height: 100%; width: 100%; background: #fff; transform-origin: 0 50%; animation: ip-prog 30s linear infinite; }
@keyframes ip-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .ip__eq i, .ip__prog i { animation: none; } .ip__prog i { transform: scaleX(.4); } }
.ip__ride { will-change: transform; position: absolute; left: 26px; top: 426px; transition: transform .7s cubic-bezier(.34,1.18,.5,1), filter .3s ease, opacity .3s ease; width: 338px; height: 158px; border-radius: 22px; box-sizing: border-box; padding: 14px 16px; text-align: left;
  background: #fff; color: #1b1b1f; box-shadow: 0 2px 8px rgba(0,0,0,.08); overflow: hidden; }
.ip__ride-head { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #fc4c02; }
.ip__bike { width: 16px; height: 16px; }
.ip__ride-stats { display: flex; gap: 12px; margin-top: 10px; }
.ip__ride-stats > span { font-size: 11px; color: #6b6b73; line-height: 1.1; }
.ip__ride-stats b { font-size: 17px; font-weight: 600; color: #1b1b1f; letter-spacing: -.02em; }
.ip__ride-stats small { display: block; font-size: 10px; margin-top: 2px; }
.ip__ride-week { position: absolute; left: 16px; bottom: 14px; display: flex; gap: 6px; align-items: flex-end; height: 34px; }
.ip__ride-week i { width: 14px; height: calc(4px + var(--h) * 30px); border-radius: 3px; background: color-mix(in srgb, #fc4c02 calc(25% + var(--h) * 75%), #f1f1f4); }
.ip__route { position: absolute; right: 14px; top: 14px; width: 100px; height: 130px; border-radius: 14px; background: #f3f3f6; }
.ip__route-line { stroke-dasharray: 100; stroke-dashoffset: 0; animation: ip-route 7s ease-in-out infinite; }
@keyframes ip-route { 0% { stroke-dashoffset: 100; } 55%, 100% { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .ip__route-line { animation: none; } }
/* iOS long-press, as in Olivier's screen recording: the widget lifts, the rest of the home screen dims, a menu with the widget sizes
   opens underneath, a finger taps the other size, the menu closes and the widget springs to its new size while the others reflow */
.ip__dim { position: absolute; inset: 0; z-index: 2; background: rgba(10,10,20,.3); opacity: 0; transition: opacity .3s ease; }
.ip__screen.is-menu .ip__dim { opacity: 1; }
.ip__screen.is-press .ip__sl { transform: scale(.97); }
.ip__screen.is-menu .ip__sl { transform: scale(1.071, 1.15); }
.ip__screen.is-small.is-menu .ip__sl { transform: scale(1.15); }
/* iOS 26 "Liquid Glass" context menu: big radius, clear glass that lets the home screen show through, a light rim, no separators */
.ip__menu { position: absolute; left: 14px; top: 246px; z-index: 3; width: 272px; padding: 7px 0 14px; border-radius: 28px; overflow: hidden; text-align: left; white-space: nowrap;
  background: linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,.34));
  -webkit-backdrop-filter: blur(16px) saturate(1.8); backdrop-filter: blur(16px) saturate(1.8);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.65), inset 0 1.5px 1px rgba(255,255,255,.9), inset 0 -10px 20px rgba(255,255,255,.18), 0 16px 40px rgba(0,0,0,.18);
  font-size: 15px; letter-spacing: -.01em; color: #111; opacity: 0; transform: scale(.6); transform-origin: 0 0; transition: opacity .22s ease, transform .35s cubic-bezier(.34,1.3,.5,1); }
.ip__screen.is-menu .ip__menu { opacity: 1; transform: scale(.74); }
.ip__sizes { display: flex; justify-content: space-between; padding: 0 14px 12px; }
.ip__size { width: 38px; height: 34px; border-radius: 10px; display: grid; place-items: center; transition: background-color .2s ease; }
.ip__size svg { width: 26px; height: 24px; fill: none; stroke: #1c1c1e; stroke-width: 1.7; stroke-linecap: round; }
.ip__size.is-on { background: rgba(255,255,255,.6); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.ip__size--x svg { opacity: .35; }
.ip__mi { display: flex; align-items: center; gap: 13px; height: 36px; padding: 0 20px; }
.ip__mi svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ip__mi--del { color: #e5342b; }
.ip__finger { position: absolute; z-index: 4; left: 0; top: 0; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  background: rgba(255,255,255,.55); box-shadow: 0 0 0 1.5px rgba(0,0,0,.12), 0 4px 14px rgba(0,0,0,.18); opacity: 0; transform: scale(.6);
  transition: opacity .2s ease, transform .2s ease, left .45s cubic-bezier(.4,0,.2,1), top .45s cubic-bezier(.4,0,.2,1); }
.ip__finger.is-on { opacity: 1; transform: scale(1); }
.ip__finger.is-tap { transform: scale(.82); }
/* wallpaper in the spirit of the iOS default ones (an original composition, not Apple artwork): soft colour fields, strongly blurred */
.ip__wall { position: absolute; inset: -60px; filter: blur(34px);
  background:
    radial-gradient(55% 38% at 25% 20%, #5a6fb8 0%, rgba(90,111,184,0) 100%),
    radial-gradient(60% 45% at 80% 55%, #3b4f9a 0%, rgba(59,79,154,0) 100%),
    radial-gradient(50% 40% at 30% 85%, #6a6aa8 0%, rgba(106,106,168,0) 100%),
    linear-gradient(180deg, #2b3566 0%, #232c58 55%, #1a2046 100%);
  transform: translateZ(0); }
@keyframes ip-wall { from { transform: translate(0, 0) scale(1); } to { transform: translate(-14px, 18px) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .ip__wall { animation: none; } }
.ip__screen .ip__clock, .ip__screen .ip__stat { color: #fff; }
.ip__dots { background: rgba(255,255,255,.18) !important; }
.ip__dots i { background: rgba(255,255,255,.45) !important; }
.ip__dots i.on { background: #fff !important; }
.ip__dots { position: absolute; left: 50%; top: 610px; transform: translateX(-50%); display: flex; gap: 8px; padding: 7px 10px; border-radius: 12px; background: rgba(0,0,0,.08); }
.ip__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(0,0,0,.25); }
.ip__dots i.on { background: rgba(0,0,0,.7); }

/* the widget itself, in Figma units (861.3 × 404.3 and 404.3 × 404.3), scaled down into its iOS slot */
.sw { position: absolute; left: 0; top: 0; overflow: hidden; border-radius: 57.42px; transform-origin: 0 0; color: #fff;
  background: linear-gradient(180deg, var(--a, #8fbfff) 0%, var(--b, #005dc1) 100%); box-shadow: 0 5.71px 8.56px rgba(0, 0, 0, .2);
  font-family: 'Hanken Grotesk', system-ui, sans-serif; }
.sw--m { width: 861.3px; height: 404.3px; }
.sw--s { width: 404.3px; height: 404.3px; }
.sw__grid { position: absolute; left: 0; top: 0; fill: var(--g, #81acda); opacity: .3; }
.sw__arc { position: absolute; left: 0; top: 0; overflow: visible; }
.sw__glow { fill: var(--glow, #438cde); }
.sw__sun { transition: opacity .35s ease; }
/* glass pills: Figma "Glass" + a soft light inner shadow at the top */
.sw__pill { position: absolute; border-radius: 36.61px; box-sizing: border-box;
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(255,255,255,.10), inset 0 18px 30px -20px rgba(230,230,230,.55), 0 4px 14px rgba(0,0,0,.06);
}
.sw__time { font-family: 'Bitcount Single', monospace; font-weight: 300; font-variation-settings: 'CRSV' 0, 'ELSH' 0, 'ELXP' 0; line-height: .95; white-space: nowrap; display: block; text-align: center; font-variant-numeric: tabular-nums; }
.sw__row { display: flex; align-items: center; white-space: nowrap; line-height: .95; }
.sw__ico { flex: none; }
.sw__lbl { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; white-space: nowrap; font-weight: 300; line-height: .95; transition: opacity .28s ease; }
.sw__lbl b { font-weight: 700; }
.sw__lbl.is-out { opacity: 0; }

.sw--m .sw__pill--time { left: 38.28px; top: 38.28px; width: 555.06px; height: 172.26px; display: flex; align-items: center; justify-content: center; padding-top: 14.6px; }
.sw--m .sw__time { font-size: 83.71px; letter-spacing: 8.37px; margin-right: -8.37px; }
.sw--m .sw__pill--info { left: 612.48px; top: 38.28px; width: 210.54px; height: 172.26px; padding: 19.14px 38.28px; display: flex; flex-direction: column; justify-content: center; gap: 19.14px; font-size: 29.29px; }
.sw--m .sw__row { gap: 9.57px; height: 28px; }
.sw--m .sw__row .sw__ico { width: 18.05px; height: 18.05px; }
.sw--m .sw__lbl { top: 337.34px; height: 28px; font-size: 29.29px; gap: 7.18px; }
.sw--m .sw__lbl .sw__ico { width: 23.93px; height: 23.93px; }

.sw--s .sw__pill--time { left: 38.28px; top: 38.28px; width: 327.77px; height: 71.78px; display: flex; align-items: center; justify-content: center; padding-top: 7px; }
.sw--s .sw__time { font-size: 39.78px; letter-spacing: 3.98px; margin-right: -3.98px; }
.sw--s .sw__pill--info { left: 38.28px; top: 129.19px; width: 327.77px; height: 71.78px; padding: 0 19.14px; display: flex; align-items: center; justify-content: space-between; font-size: 26.32px; }
.sw--s .sw__row { gap: 4.55px; height: 25px; }
.sw--s .sw__row .sw__ico { width: 19.14px; height: 19.14px; }
.sw--s .sw__lbl { top: 337.34px; height: 25px; font-size: 26.32px; gap: 7.18px; }
.sw--s .sw__lbl .sw__ico { width: 23.93px; height: 23.93px; }
/* Grid: 3 columns x 3 rows of 550px tiles */
.grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gap); row-gap: calc(120 * var(--u));
  padding: var(--gap) var(--gutter);
}
.tile { position: relative; border-radius: var(--radius); height: calc(550 * var(--u)); min-width: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
.tile--outline { border: 1px solid var(--line); }
.tile--image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.tile--icon { background: var(--tile-grey); overflow: visible; cursor: zoom-in; }
.tile--zoom img { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
@media (hover: hover) { .tile--zoom:hover img { transform: scale(1.06); } }
.tile--dice { padding: 0; border: 0; width: 100%; background: #2a0f08; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tile--dice:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.tile--dice img { will-change: transform, filter; }
/* Kadenz app icon: a flat square by default; the canvas redraws it with a grainy blur that the cursor paints on */
.kz-icon { width: calc(330 * var(--u)); aspect-ratio: 1 / 1; border-radius: 27.27%; background: #3323b9; display: block; position: relative; z-index: 5;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; will-change: transform; }
.kz-icon.has-fx { background: none; }
.kz-icon.is-dragging { cursor: grabbing; }
.kz-icon canvas { position: absolute; left: 50%; top: 50%; width: 220%; height: 220%; translate: -50% -50%; pointer-events: none; display: none; }
.kz-icon.has-fx canvas { display: block; }
.kz-icon svg { position: absolute; left: 26.36%; top: 33.33%; width: 46.78%; height: auto; display: block; pointer-events: none; }

/* Kadenz prototype: plays by itself inside an iframe; the black rounded box is the phone outline while it loads */
/* color-scheme matches the embedded page (always light): otherwise a dark host page gives the iframe an opaque white backdrop */
.kz-frame { aspect-ratio: 418 / 872; height: auto; border: 0; display: block; background: #000; border-radius: 12.92% / 6.19%; color-scheme: light; }
/* once the prototype has loaded it draws the phone itself; the black box underneath would show as a hairline at the edge */
.kz-frame.is-ready { background: transparent; border-radius: 0; }
.tile--phone { background: var(--tile-phone); background: linear-gradient(180deg, #d8d5ff 0%, #b2abf6 100%); }
.tile--phone .kz-frame { width: calc(227.3 * var(--u)); pointer-events: none; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.tile__hit { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: none; font: inherit; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.tile__hit:focus-visible { outline: 2px solid var(--blue); outline-offset: -4px; }
@media (hover: hover) { .tile--phone:hover .kz-frame { transform: scale(1.04); } }
/* Playlist covers: a wheel of square covers. The front one stands upright at the top, its neighbours tilt away along the
   circle and run out of the tile. Every click turns the wheel one cover further, a sideways swipe or drag turns it by hand; the name below opens the playlist on Spotify. */
/* the tile takes on a light tint of the cover in front (data-tint: the cover's main colour, weighted towards its saturated parts) */
.tile--covers { --tint: var(--tile-cream); background: var(--tile-cream); background: color-mix(in oklab, var(--tile-cream) 82%, var(--tint));
  transition: background-color .8s cubic-bezier(.2,.8,.2,1); overflow: clip; cursor: pointer; -webkit-tap-highlight-color: transparent;
  touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.tile--covers.is-dragging, .tile--covers.is-dragging .cover { cursor: grabbing; }
.cover { position: absolute; left: 50%; top: calc(123 * var(--u)); width: calc(208 * var(--u)); aspect-ratio: 1 / 1; margin-left: calc(-104 * var(--u));
  padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--cover-ph); font: inherit; cursor: pointer;
  box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) var(--cover-shadow); will-change: transform; -webkit-tap-highlight-color: transparent; }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.cover:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.covers__name { position: absolute; left: 50%; top: calc(366 * var(--u)); translate: -50% 0; margin: 0; padding: 6px 12px; border: 1px solid var(--pill-bg); border-radius: 999px;
  background: var(--pill-bg); font: inherit; font-size: 14px; line-height: .95; color: var(--pill-ink); text-decoration: none; white-space: nowrap; cursor: pointer; z-index: 20;
  transition: opacity .2s ease; }
.covers__name { display: inline-flex; align-items: center; }
/* Hover: ein Pfeil nach rechts oben schiebt sich in die Pille – der Link führt aus der Seite hinaus */
.covers__arrow { display: inline-flex; flex: none; width: 0; margin-left: 0; overflow: hidden;
  transition: width .28s cubic-bezier(.22,.9,.3,1), margin-left .28s cubic-bezier(.22,.9,.3,1); }
.covers__arrow svg { flex: none; width: 10px; height: 10px; display: block; opacity: 0; transform: translate(-7px, 7px);
  transition: transform .32s cubic-bezier(.22,.9,.3,1), opacity .2s ease; }
/* the same arrow sits in every text CTA (Kontakt, Feierabendrunde, Merci) and slides in on hover the same way */
.covers__name:hover .covers__arrow, .covers__name:focus-visible .covers__arrow,
.cta:hover .covers__arrow, .cta:focus-visible .covers__arrow { width: 10px; margin-left: 6px; }
.covers__name:hover .covers__arrow svg, .covers__name:focus-visible .covers__arrow svg,
.cta:hover .covers__arrow svg, .cta:focus-visible .covers__arrow svg { opacity: 1; transform: none; }
.covers__name:active .covers__arrow svg, .cta:active .covers__arrow svg { transform: translate(2px, -2px); }
@media (hover: none) {
  .covers__arrow { width: 10px; margin-left: 6px; }
  .covers__arrow svg { opacity: 1; transform: none; }
}
.covers__name:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.covers__name.is-changing { opacity: 0; }

.tile--salut { background: var(--tile-salut); flex-direction: column; gap: calc(30 * var(--u)); }
.photos { position: relative; width: calc(295.33 * var(--u)); aspect-ratio: 231 / 256.4; max-width: 100%;
  padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.photos:focus-visible { outline: 2px solid var(--salut); outline-offset: 8px; border-radius: 8px; }
.photo { position: absolute; height: auto; display: block; user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(0 calc(6 * var(--u)) calc(14 * var(--u)) var(--photo-shadow)); }
.photo--ride { left: 13.86%; top: 0; width: 86.14%; }
.photo--portrait { left: 0; top: 7.4%; width: 89.87%; }
.photo.is-front { z-index: 2; }
.photo.is-back { z-index: 1; }
.photos:hover .photo.is-back { transform: translate(4%, -3%) rotate(2deg); }
.photo { transition: transform .5s cubic-bezier(.22,.9,.3,1); will-change: transform; }
.salut { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 1; color: var(--salut); }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Kadenz overlay: blurred white veil + centred card; --m scales the card to the viewport */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  visibility: hidden; opacity: 0; transition: opacity .3s ease, visibility 0s linear .3s; }
.modal.is-open { visibility: visible; opacity: 1; transition: opacity .3s ease; }
.modal__backdrop { position: absolute; inset: 0; background: var(--veil);
  -webkit-backdrop-filter: blur(27px); backdrop-filter: blur(27px); border: 0; padding: 0; cursor: zoom-out; }
.modal__card {
  --m: min(1px, calc(100vw / 1920), calc(100vh / 1090));
  --m: min(1px, calc(100vw / 1920), calc(100dvh / 1090));
  --h: calc(1014 * var(--m)); --edge: max(36px, calc(52 * var(--m)));
  position: relative; width: calc(959.47 * var(--m)); height: var(--h); overflow: hidden;
  border-radius: calc(102.56 * var(--m)); background: var(--card);
  transform: scale(.96) translateY(calc(16 * var(--m))); transition: transform .45s cubic-bezier(.2,.9,.25,1); }
.modal.is-open .modal__card { transform: none; }
/* The card keeps its size; phone + caption fill the first view, the screens follow in a 2-column grid when scrolling */
.modal__scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; border-radius: inherit; }
.modal__scroll::-webkit-scrollbar { display: none; }
.modal__scroll:focus-visible { outline: 2px solid var(--blue); outline-offset: -6px; }
.modal__hero { box-sizing: border-box; min-height: 100%; padding-block: calc(79.74 * var(--m));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(40.67 * var(--m)); }
.modal__screens { margin: 0; padding: 0 0 calc(96 * var(--m)); list-style: none; display: grid;
  grid-template-columns: repeat(2, calc(320 * var(--m))); justify-content: center; gap: calc(72 * var(--m)) calc(64 * var(--m)); }
.modal__screens li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(320 * var(--m)); }
.modal__screens img { display: block; width: 100%; height: auto; aspect-ratio: 418 / 872; }
.modal__phone { width: calc(388.5 * var(--m)); margin: calc(-13 * var(--m)); }
.modal__caption { margin: 0; padding: calc(6.38 * var(--m)) calc(12.76 * var(--m));
  border: max(1px, calc(1.6 * var(--m))) solid var(--line); border-radius: 999px;
  font-size: 14px; line-height: .95; color: var(--ink-muted); white-space: nowrap; }
.modal__close, .modal__more { flex: none;
  width: max(32px, calc(36 * var(--m))); height: max(32px, calc(36 * var(--m)));
  padding: 0; border: 0; background: var(--card); border-radius: 50%; cursor: pointer; }
.modal__close { position: absolute; top: var(--edge); right: var(--edge); }
.modal__more { transition: opacity .3s ease; }
.modal__foot { display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* Kadenz overlay: a short description instead of the outlined one-liner, and an arrow that hops to show there is more below */
#kadenz-modal .modal__hero { padding-block: calc(46 * var(--m)); gap: calc(52 * var(--m)); }
#kadenz-modal .modal__phone { width: calc(335 * var(--m)); }
.modal__text { margin: 0; max-width: max(calc(760 * var(--m)), 300px); font-size: 14px; line-height: 1.4; color: var(--ink-muted); text-align: center; text-wrap: balance; }
@keyframes modal-hop { 0%, 24%, 100% { transform: translateY(0); } 7% { transform: translateY(-10px); } 13% { transform: translateY(0); } 18% { transform: translateY(-5px); } }
.modal__card.is-hinting .modal__more { animation: modal-hop 4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .modal__card.is-hinting .modal__more { animation: none; } }
.modal__card.is-scrolled .modal__more { opacity: 0; pointer-events: none; }
.modal__close svg, .modal__more svg { width: 100%; height: 100%; display: block; }
.modal__close svg rect, .modal__more svg rect { stroke: var(--line); }
.modal__close svg path { fill: var(--ink-muted); }
.modal__more svg path { stroke: var(--ink-muted); }
.modal__close:hover svg rect, .modal__more:hover svg rect { stroke: var(--ink-muted); }
.modal__close:focus-visible, .modal__more:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
/* Logo overlay: the Kadenz app icon large on a square card, one line below saying what it is */
.modal--logo .modal__card { width: calc(800 * var(--m)); --h: calc(800 * var(--m)); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: calc(56 * var(--m)); }
.logo-big { flex: none; position: relative; display: block; width: calc(460 * var(--m)); aspect-ratio: 1 / 1; border-radius: 27.27%; background: #3323b9; }
.logo-big svg { position: absolute; left: 26.36%; top: 33.33%; width: 46.78%; height: auto; display: block; }
.modal--logo .modal__text { padding-inline: 24px; }
.modal--logo .modal__card:focus { outline: none; }
body.has-modal { overflow: hidden; }

/* Small screens: stack tiles in one column */
@media (max-width: 800px) {
  :root { --u: 0.5px; --gutter: 16px; --gap: 16px; --radius: 28px; }
  .grid { grid-template-columns: 1fr; row-gap: 16px; }
  .tile { height: auto; aspect-ratio: 1 / 1; }
  /* image tiles carry their own baked 60px corner (≈11% of width): match it so no backdrop shows */
  .tile--image { border-radius: 11% / 11%; background: transparent !important; }
  .tile--stack { border-radius: 11% / 11%; }
  .kz-icon { width: 45%; }
  .cover { top: 22.4%; width: 37.8%; margin-left: -18.9%; }
  .covers__name { top: 66.5%; }
  .tile--phone .kz-frame { width: 38%; }
  .photos { width: 52%; }
  .pill { padding: 6px 10px; border-width: 1.5px; }
  .pill--outline, .pill--wide { padding: 6px 12px; }
  .bar nav { gap: 6px; }
  .star { width: 20px; height: 20px; }
  .theme { padding: 6px; }
  .theme svg { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
  /* Header: name | star | nav in a 3-column grid so nothing can overlap */
  .site-header { height: auto; min-height: 72px; padding-block: 14px; display: grid;
    grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 8px; }
  .site-header .star { position: fixed; top: 36px; left: 50%; translate: -50% -50%; }
  .site-header #home { justify-self: start; }
  .site-header nav { grid-column: 3; justify-self: end; }
  /* Footer: star on top, Merci and links centred in one row below; wraps centred on very small phones */
  .site-footer { height: auto; padding-block: 20px 24px; display: flex; flex-wrap: wrap;
    justify-content: center; align-items: center; gap: 12px 6px; }
  .site-footer .star { position: static; translate: none; order: -1; flex: 0 0 100%; height: 20px; }
  .site-footer .star svg { width: 20px; margin: 0 auto; }
  .site-footer nav { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 800px) {
  /* Mobile: the overlay stays a square card, like the tiles */
  .modal__card { --s: min(calc(100vw - 32px), calc(100vh - 32px), 520px); --s: min(calc(100vw - 32px), calc(100dvh - 32px), 520px);
    --m: calc(var(--s) / 1100); --h: var(--s); width: var(--s); }
  .modal__hero { padding-block: 0; }
  /* the Kadenz card is taller than a square here: phone, the longer text and the arrow need the room */
  #kadenz-modal .modal__card { --h: min(calc(var(--s) * 1.45), calc(100vh - 32px)); --h: min(calc(var(--s) * 1.45), calc(100dvh - 32px)); }
  #kadenz-modal .modal__hero { padding-block: 20px; gap: 28px; }
  #kadenz-modal .modal__phone { width: calc(388.5 * var(--m)); }
  .modal--logo .modal__card { width: var(--s); --h: var(--s); gap: 24px; --edge: 16px; }
  .logo-big { width: 58%; }
  .modal__foot { padding-inline: 28px; gap: 10px; }
  .modal__text { max-width: none; }
  .modal__caption { padding: 4px 9px; }
  .modal__screens { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; padding: 4px 20px 28px; }
  .modal__screens li:last-child:nth-child(odd) { width: calc(50% - 6px); }
}
@media (max-width: 360px) {
  .pill { padding-inline: 8px; }
  .theme { padding: 6px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* wide: double-width orange tile like the deck slide – a large iPad running a short loop, cut off by the bottom edge */
.tile--wide { grid-column: span 2; display: block; color: #fff; text-decoration: none;
  background: linear-gradient(150deg, #ff7c06 0%, #ff7505 30%, #fe5206 68%, #fe3405 100%); }
.wd__device { position: absolute; left: 19%; top: calc(52 * var(--u)); width: 62%; pointer-events: none; transform-origin: 50% 0; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
@media (hover: hover) { .tile--wide:hover .wd__device { transform: scale(1.04); } }
.wd__video { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 971; background: transparent; }
.tile--wide .tile__hit { z-index: 2; }
@media (max-width: 800px) {
  .tile--wide { grid-column: auto; aspect-ratio: 1 / 1; }
  .wd__device { left: 6%; top: 50%; width: 88%; translate: 0 -50%; }
}
/* wide overlay: the first state fills the first view, the other states follow one per row */
.modal__ipad { display: block; width: calc(740 * var(--m)); height: auto; aspect-ratio: 1600 / 1213; }
#wide-modal .modal__hero { padding-block: calc(60 * var(--m)); gap: calc(48 * var(--m)); }

@media (max-width: 800px) {
  #wide-modal .modal__card { --h: min(calc(var(--s) * 1.62), calc(100vh - 32px)); --h: min(calc(var(--s) * 1.62), calc(100dvh - 32px)); }
  #wide-modal .modal__hero { padding-block: 80px 24px; gap: 24px; justify-content: flex-start; }
  .modal__ipad { width: calc(100% - 32px); }
}
/* the iPad stills and the video carry white corners outside the rounded frame: clip them to the frame radius (50 of 1414 × 1072) */
.modal__ipad, .wd__video { border-radius: 3.6% / 4.75%; }
/* close button as frosted glass, so the screens stay visible behind it while scrolling */
:root { --glass: rgba(255, 255, 255, .55); --glass-edge: rgba(255, 255, 255, .7); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --glass: rgba(24, 24, 30, .5); --glass-edge: rgba(255, 255, 255, .12); } }
:root[data-theme="dark"] { --glass: rgba(24, 24, 30, .5); --glass-edge: rgba(255, 255, 255, .12); }
.modal__close { background: var(--glass); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 4px 14px rgba(0, 0, 0, .12); }

/* About overlay: opened by the name in the header – photo and a short introduction side by side, stacked on phones */
.modal--about .modal__card { width: calc(1180 * var(--m)); height: auto; --h: auto; outline: none; }
.modal--about .about { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.modal--about .about::-webkit-scrollbar { display: none; }
.about { padding: calc(96 * var(--m)); display: flex; align-items: center; gap: calc(72 * var(--m)); }
.about__photo { flex: none; display: block; width: calc(400 * var(--m)); height: auto; aspect-ratio: 768 / 1024; object-fit: cover; border-radius: calc(48 * var(--m)); background: var(--cover-ph); }
.about__text { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding-right: calc(24 * var(--m)); }
.about__title { margin: 0 0 8px; font: 700 26px/1.2 var(--font-display); color: var(--pill-bg); }
.about p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-muted); max-width: 60ch; }
@media (max-width: 800px) {
  .modal--about .modal__card { width: var(--s); --edge: 16px; }
  .about { flex-direction: column; align-items: stretch; padding: 64px 24px 28px; gap: 24px; }
  .about__photo { width: 100%; aspect-ratio: 4 / 4.2; border-radius: 20px; }
  .about__text { padding-right: 0; }
  .about p { font-size: 15px; }
}
}

/* the X stays in the top right corner of every overlay while its content scrolls, without the grey ring */
.modal__close { z-index: 5; }
.modal__close svg rect, .modal__close:hover svg rect { stroke: transparent; }

/* wide overlay, below the first view: the flow as zoomed-in details on light panels, numbered, in a two-column grid */
.wd-steps { grid-template-columns: repeat(2, calc(358 * var(--m))); gap: calc(56 * var(--m)) calc(24 * var(--m)); counter-reset: none; }
.wd-step { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.wd-step--full { grid-column: 1 / -1; }
.wd-step__panel { display: grid; place-items: center; border-radius: calc(36 * var(--m)); overflow: hidden;
  background: radial-gradient(80% 90% at 50% 45%, #fff8f4 0%, #f3f3f3 60%, #ececec 100%); padding: calc(34 * var(--m)); }
.wd-step--half .wd-step__panel { aspect-ratio: 1 / 1.08; }
.wd-step__panel img { display: block; aspect-ratio: auto; max-width: 100%; height: auto; max-height: calc(330 * var(--m)); width: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); mask-composite: intersect; }
.wd-step--full .wd-step__panel img { width: calc(620 * var(--m)); max-height: none; }
.wd-step__cap { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-muted); text-wrap: pretty; }
.wd-step__cap b { color: var(--pill-bg); font-weight: 700; }
.wd-step__no { display: inline-block; margin-right: 8px; font: 700 12px/1 var(--font-display); color: #fe5206; letter-spacing: .04em; }
@media (max-width: 800px) {
  .wd-steps { grid-template-columns: 1fr; gap: 28px; padding: 4px 16px 28px; }
  .wd-step--full { grid-column: auto; }
  .wd-step__panel { border-radius: 20px; padding: 18px; }
  .wd-step--half .wd-step__panel { aspect-ratio: auto; }
  .wd-step--full .wd-step__panel img { width: 100%; }
  .wd-step__panel img { max-height: 300px; }
}
.wd-steps li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: stretch; width: auto; }
.wd-step--full .wd-step__panel img { width: 100%; }
.wd-step:last-child .wd-step__panel img { width: 78%; }

/* Salut tile: dark grey, so the black-and-white photos stand out and it no longer matches the light tiles around it */
:root { --tile-salut: #2a2a2e; --salut: #f2f2f2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tile-salut: #232327; --salut: #f2f2f2; } }
:root[data-theme="dark"] { --tile-salut: #232327; --salut: #f2f2f2; }

/* Big running type above the footer: one line of large display type that drifts left in an endless loop, every second phrase as an outline */
.ticker { display: block; text-decoration: none; cursor: pointer; overflow: hidden; padding-block: calc(20 * var(--u)); margin-block: calc(20 * var(--u)) calc(-20 * var(--u)); }
.ticker__track { display: flex; width: max-content; animation: ticker 110s linear infinite; animation-play-state: paused; }
.ticker.is-running .ticker__track { animation-play-state: running; }
.ticker:hover .ticker__track, .ticker:focus-visible .ticker__track { animation-play-state: paused; }
.ticker:focus-visible { outline: 2px solid var(--blue); outline-offset: -4px; }
.ticker:hover .ticker__word--line { color: var(--pill-bg); }
.ticker__word--line { transition: color .3s ease; }
.ticker__group { display: flex; align-items: center; flex: none; }
.ticker__word { font: 700 calc(190 * var(--u))/1 var(--font-display); letter-spacing: -.035em; white-space: nowrap; color: var(--pill-bg); padding-inline: calc(36 * var(--u)); }
.ticker__word--line { color: transparent; -webkit-text-stroke: max(1.5px, calc(2.5 * var(--u))) var(--pill-bg); }
.ticker__star { flex: none; width: calc(110 * var(--u)); height: auto; color: var(--blue); animation: ticker-spin 12s linear infinite; }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes ticker-spin { to { transform: rotate(360deg); } }
@media (max-width: 800px) {
  .ticker { padding-block: 8px; margin-block: 8px 0; }
  .ticker__word { font-size: 64px; padding-inline: 16px; }
  .ticker__word--line { -webkit-text-stroke-width: 1.5px; }
  .ticker__star { width: 40px; }
  .ticker__track { animation-duration: 70s; }
}
@media (prefers-reduced-motion: reduce) { .ticker__track, .ticker__star { animation: none; } }


/* Overlays: the page blurs first, then the card comes in – quicker than before */
.modal { transition: opacity .18s ease, visibility 0s linear .2s; }
.modal.is-open { transition: opacity .18s ease; }
.modal__card { opacity: 0; transition: transform .14s ease, opacity .12s ease; }
.modal.is-open .modal__card { opacity: 1; transition: transform .3s cubic-bezier(.2,.9,.25,1) .14s, opacity .2s ease .14s; }