@font-face {
  font-family: Newsreader;
  src: url("./assets/2026-09/fonts/Newsreader-Display.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  color-scheme: light;
  --paper: #f5f0e7;
  --light: #fcf9f3;
  --ink: #302823;
  --muted: #6e635b;
  --wine: #73152b;
  --line: #dcd2c4;
  --serif: Newsreader, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 28px; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
::selection { background: #ead0d4; color: var(--ink); }
a { color: inherit; text-underline-offset: 5px; text-decoration-thickness: 1px; }
img { display: block; max-width: 100%; }
p, h1, h2, h3, figure { margin: 0; }
a:focus-visible { outline: 2px solid var(--wine); outline-offset: 6px; }
.skip { position: fixed; z-index: 20; inset: 10px auto auto 10px; padding: 12px 18px; color: var(--light); background: var(--wine); transform: translateY(-160%); }
.skip:focus { transform: none; }
.shell { width: min(1180px, calc(100% - 96px)); margin-inline: auto; }
.not-found { padding-block: 72px; }
.not-found h1 { margin-block: 18px 32px; font: 400 100px/1 var(--serif); }
.not-found section { margin-block: 28px; }
.not-found h2 { font: 400 28px/1.2 var(--serif); margin-bottom: 8px; }
.not-found a { color: var(--wine); }
.privacy-note { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; padding-block: 88px; }
.privacy-note h2 { margin-top: 16px; max-width: 400px; font: 400 clamp(36px, 3.6vw, 50px)/1.1 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.privacy-note p + p { margin-top: 16px; color: var(--muted); }
.privacy-note a { display: inline-block; color: var(--wine); margin-top: 22px; font-size: 14px; }
.privacy-note .privacy-small { font-size: 12px; margin-top: 24px; }
@media (max-width: 760px) { .privacy-note { grid-template-columns: 1fr; gap: 26px; padding-block: 56px; } }
.reading-progress { position: fixed; z-index: 15; top: 0; left: 0; width: 100%; height: 3px; background: var(--wine); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.site-header { height: 88px; }
.nav { display: flex; height: 100%; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); gap: 28px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font: 400 26px/1 var(--serif); text-decoration: none; white-space: nowrap; }
.wordmark img { width: 32px; height: 32px; border-radius: 8px; }
.nav-right { display: flex; align-items: center; gap: 36px; font-size: 14px; }
.nav-link { text-decoration: none; }
.nav-link:hover { text-decoration: underline; }
.languages { display: flex; align-items: center; gap: 5px; }
.languages a { display: flex; min-height: 44px; min-width: 38px; justify-content: center; align-items: center; text-decoration: none; color: var(--muted); }
.languages a[aria-current] { color: var(--wine); text-decoration: underline; text-underline-offset: 7px; }
.languages a:hover { color: var(--wine); }
.hero { position: relative; overflow: hidden; }
.hero-inner { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 60px; min-height: min(748px, calc(100svh - 88px)); padding-block: 24px 44px; }
.hero-copy { position: relative; z-index: 2; }
.kicker { color: var(--wine); font-size: 13px; letter-spacing: .035em; }
.hero h1 { font: 400 clamp(66px, 7.4vw, 104px)/1.08 var(--serif); letter-spacing: -.035em; margin: 14px 0 8px; white-space: nowrap; animation: arrive 850ms cubic-bezier(.2,.7,.2,1) both; }
.promise { position: relative; width: fit-content; font: 400 clamp(28px, 2.55vw, 38px)/1.2 var(--serif); letter-spacing: -.015em; }
.promise::after { content: ""; display: block; position: absolute; bottom: -9px; left: 0; width: 88px; height: 7px; border-bottom: 2px solid var(--wine); border-radius: 50%; transform-origin: left; animation: ink-stroke 800ms 400ms cubic-bezier(.2,.7,.2,1) both; }
.intro { max-width: 425px; margin-top: 29px; color: var(--muted); font-size: 18px; line-height: 1.65; animation: arrive 950ms 80ms cubic-bezier(.2,.7,.2,1) both; }
.download-links { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 29px; }
.app-store, .google-play { display: block; flex: none; border-radius: 6px; }
.app-store img { width: auto; height: 46px; }
.google-play { width: 156px; height: 46px; position: relative; }
.google-play img { width: 179px; max-width: none; height: auto; position: absolute; left: -11.5px; top: -11.6px; }
.platform { margin-top: 13px; font-size: 12px; color: var(--muted); }
.closer { display: inline-flex; align-items: center; gap: 12px; margin-top: 35px; font-size: 13px; color: var(--muted); text-decoration: none; }
.closer span { transition: transform 250ms ease; }
.closer:hover span { transform: translateY(5px); }
.hero-art { position: relative; width: 100%; height: min(69svh, 620px); display: grid; place-items: center; isolation: isolate; transform: perspective(1000px) rotateX(calc(var(--pointer-y, 0) * -2deg)) rotateY(calc(var(--pointer-x, 0) * 3deg)); transition: transform 500ms ease-out; }
.hero-orbit { position: absolute; width: 112%; aspect-ratio: 1; max-height: 95%; border: 1px solid #d9ccba; border-radius: 50%; transform: rotate(-17deg) scaleY(.92); z-index: -2; }
.library { position: relative; z-index: 2; }
.library-window { overflow: hidden; border: 1px solid #d6c9b8; border-radius: 25px; box-shadow: 0 28px 55px #49332224, 0 3px 9px #49332212; background: #f4efe7; animation: screen-arrive 1100ms cubic-bezier(.16,.75,.22,1) both; }
.library img { height: min(69svh, 620px); width: auto; max-width: none; }
.hero-back { position: absolute; top: 15%; width: 43%; overflow: hidden; border-radius: 20px; border: 1px solid #d6c9b8; background: var(--paper); box-shadow: 0 14px 24px #49332212; }
.hero-back img { width: 100%; height: auto; }
.hero-back-left { left: 0; transform: rotate(-12deg); animation: fan-left 1300ms 100ms cubic-bezier(.16,.75,.22,1) both; }
.hero-back-right { right: 0; transform: rotate(12deg); animation: fan-right 1300ms 180ms cubic-bezier(.16,.75,.22,1) both; }
.journal { background: var(--light); border-top: 1px solid var(--line); }
.tour-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; padding-block: 96px 72px; border-bottom: 1px solid var(--line); }
.tour-intro h2 { max-width: 520px; margin-top: 16px; font: 400 clamp(38px, 3.8vw, 53px)/1.08 var(--serif); letter-spacing: -.025em; text-wrap: balance; }
.tour-intro-right > p { max-width: 465px; color: var(--muted); font-size: 16px; }
.tour-index { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.tour-index a { display: flex; align-items: center; gap: 9px; min-height: 47px; border-bottom: 1px solid var(--line); font-size: 13px; text-decoration: none; }
.tour-index a > span:first-child { font-size: 11px; color: var(--wine); font-variant-numeric: tabular-nums; }
.index-arrow { margin-left: auto; color: var(--wine); transition: transform 220ms ease; }
.tour-index a:hover .index-arrow { transform: translate(3px,3px); }
.tour-index a:hover { color: var(--wine); }
.tour-stage { display: none; }
.chapter { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 90px; min-height: 700px; padding-block: 64px; border-bottom: 1px solid var(--line); }
.chapter-copy { grid-column: 2; grid-row: 1; max-width: 490px; }
.chapter-label { display: flex; align-items: center; gap: 16px; color: var(--wine); font-size: 13px; }
.chapter-number { display: inline-block; font: 400 28px/1 var(--serif); }
.chapter h3 { margin-top: 22px; font: 400 clamp(37px, 4vw, 57px)/1.05 var(--serif); letter-spacing: -.025em; text-wrap: balance; }
.chapter-body { margin-top: 25px; font-size: 17px; color: var(--muted); max-width: 440px; line-height: 1.75; }
.chapter-detail { position: relative; padding-left: 22px; margin-top: 28px; max-width: 410px; color: var(--ink); font-size: 14px; line-height: 1.65; }
.chapter-detail::before { content: ""; position: absolute; left: 0; top: 4px; width: 2px; height: calc(100% - 8px); background: var(--wine); }
.chapter-visual { grid-column: 1; grid-row: 1; width: min(300px, 100%); justify-self: center; }
.screen-window { width: 100%; overflow: hidden; border: 1px solid #d6c9b8; border-radius: 24px; background: var(--paper); box-shadow: 0 22px 44px #49332217, 0 2px 5px #49332208; }
.screen-window img { width: 100%; height: auto; }
.screen-tasting { width: min(370px, 100%); }
.screen-tasting .screen-window { aspect-ratio: 1 / 1.29; }
.screen-tasting img { transform: translateY(-41.2%); }
html[lang="de"] .screen-ask { width: min(370px, 100%); }
html[lang="de"] .screen-ask .screen-window { aspect-ratio: 1 / 1.15; }
html[lang="de"] .screen-ask img { transform: translateY(-47.05%); }
.tour-footnote { padding-block: 24px 42px; color: var(--muted); font-size: 12px; text-align: center; }
.closing { padding-block: 76px; color: var(--light); background: var(--wine); overflow: hidden; }
.closing-inner { display: flex; gap: 60px; align-items: center; justify-content: space-between; }
.closing-inner.in-view { animation: arrive 800ms cubic-bezier(.2,.75,.2,1) both; }
.closing-brand { font: 400 27px/1.2 var(--serif); margin-bottom: 25px; color: #f0dce0; }
.closing h2 { max-width: 690px; font: 400 clamp(36px, 4vw, 52px)/1.1 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.closing p:not(.closing-brand) { margin-top: 16px; color: #f0dce0; font-size: 15px; }
.closing-downloads { min-width: 240px; }
.closing-downloads p { margin-top: 0 !important; font-size: 13px !important; }
.store-link { display: flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 54px; padding: 13px 0; font-size: 15px; text-decoration: none; border-bottom: 1px solid #c397a1; }
.store-link span { transition: transform 250ms ease; }
.store-link:hover span { transform: translate(4px,-4px); }
.closing a:focus-visible { outline-color: var(--light); }
.site-footer { padding-block: 38px 28px; }
.footer-main { display: flex; justify-content: space-between; align-items: start; gap: 32px; }
.footer-brand { font: 400 25px/1.2 var(--serif); }
.maker { margin-top: 8px; font-size: 13px; color: var(--muted); }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; font-size: 12px; padding-top: 4px; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.company { margin-top: 25px; font-size: 11px; color: var(--muted); }
.company a { text-decoration: none; }
.company a:hover { text-decoration: underline; }
@keyframes arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ink-stroke { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes screen-arrive { from { opacity: 0; transform: translateY(65px) rotate(4deg); } to { opacity: 1; transform: none; } }
@keyframes fan-left { from { opacity: 0; transform: translateX(65px) rotate(0deg); } to { opacity: 1; transform: rotate(-12deg); } }
@keyframes fan-right { from { opacity: 0; transform: translateX(-65px) rotate(0deg); } to { opacity: 1; transform: rotate(12deg); } }
@keyframes chapter-arrive { from { opacity: .4; transform: translateY(20px); } to { opacity: 1; transform: none; } }

@media (min-width: 981px) {
  .tour-ready .tour { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: start; }
  .tour-ready .tour-stage { display: block; position: sticky; top: 24px; height: calc(100svh - 48px); max-height: 850px; padding-block: 14px; }
  .stage-art { position: relative; display: grid; place-items: center; height: calc(100% - 91px); }
  .stage-ring { width: 91%; aspect-ratio: 1; position: absolute; border: 1px solid var(--line); border-radius: 50%; }
  .stage-ring::before { content: ""; position: absolute; inset: 17px; border: 1px solid #e9e0d3; border-radius: 50%; }
  .stage-screen { position: absolute; width: min(310px, calc((100svh - 167px) * .46025)); max-width: 85%; opacity: 0; transform: translateY(22px) rotate(2deg) scale(.97); transition: opacity 450ms ease, transform 650ms cubic-bezier(.2,.75,.2,1); pointer-events: none; }
  .stage-screen.is-active { opacity: 1; transform: none; z-index: 2; }
  .stage-screen.screen-tasting { width: min(380px, calc((100svh - 167px) / 1.29)); }
  html[lang="de"] .stage-screen.screen-ask { width: min(380px, calc((100svh - 167px) / 1.15)); }
  .stage-nav { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
  .stage-nav a { display: flex; align-items: center; justify-content: center; position: relative; width: 42px; min-height: 42px; color: var(--muted); text-decoration: none; font-size: 11px; font-variant-numeric: tabular-nums; }
  .stage-nav a::after { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background: var(--line); transition: background 250ms ease; }
  .stage-nav a[aria-current] { color: var(--wine); }
  .stage-nav a[aria-current]::after, .stage-nav a:hover::after { background: var(--wine); }
  .screen-note { text-align: center; margin-top: 13px; font-size: 11px; color: var(--muted); }
  .tour-ready .chapter { display: flex; align-items: center; min-height: max(540px, 88svh); gap: 0; }
  .tour-ready .chapter:last-child { border-bottom: 0; }
  .tour-ready .chapter-visual { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .tour-ready .chapter.is-current .chapter-copy { animation: chapter-arrive 650ms cubic-bezier(.2,.75,.2,1) both; }
  .tour-ready .tour-footnote { display: none; }
}
@media (max-width: 980px) {
  .chapter-copy.in-view { animation: chapter-arrive 700ms cubic-bezier(.2,.75,.2,1) both; }
  .chapter-visual.in-view { animation: screen-arrive 850ms cubic-bezier(.2,.75,.2,1) both; }
  .shell { width: calc(100% - 64px); }
  .hero-inner { gap: 30px; }
  .hero h1 { font-size: 68px; }
  .intro { font-size: 17px; }
  .hero-art, .library img { height: min(58svh, 520px); }
  .hero-back { width: 53%; }
  .hero-back-left { left: -9%; }
  .hero-back-right { right: -9%; }
  .download-links { gap: 15px; }
  .app-store img { height: 40px; }
  .google-play { width: 136px; height: 40px; }
  .google-play img { width: 156px; top: -10px; left: -10px; }
  .platform { max-width: 280px; }
  .tour-intro { gap: 45px; padding-block: 72px 54px; }
  .tour-index { grid-template-columns: 1fr; margin-top: 18px; }
  .chapter { gap: 45px; min-height: 640px; }
  .chapter-visual { width: min(280px,100%); }
  .chapter h3 { font-size: 40px; }
  .chapter-body { font-size: 16px; }
  .closing-inner { gap: 40px; }
  .footer-main { flex-direction: column; gap: 22px; }
}
@media (max-width: 680px) {
  .shell { width: calc(100% - 40px); }
  .site-header { height: 72px; }
  .nav { gap: 12px; }
  .wordmark { font-size: 24px; gap: 8px; }
  .wordmark img { width: 27px; height: 27px; border-radius: 7px; }
  .nav-link { display: none; }
  .nav-right { gap: 0; }
  .languages { gap: 0; font-size: 12px; }
  .languages a { min-width: 33px; }
  .hero-inner { grid-template-columns: 1fr; min-height: auto; padding-top: 34px; padding-bottom: 0; gap: 32px; }
  .kicker { font-size: 12px; }
  .hero h1 { margin-top: 10px; font-size: clamp(54px, 13.5vw, 76px); }
  .promise { font-size: clamp(26px, 6.5vw, 32px); }
  .intro { margin-top: 23px; font-size: 16px; max-width: 440px; }
  .download-links { margin-top: 24px; gap: 15px; }
  .platform { margin-top: 12px; font-size: 11px; max-width: 100%; }
  .closer { display: none; }
  .hero-art { width: 100%; height: clamp(166px, calc(100svh - 520px), 330px); display: block; transform: none; }
  .hero-orbit { width: 94%; height: 330px; max-height: none; left: 3%; top: 16px; }
  .library { width: min(73%, 300px); margin-inline: auto; }
  .library-window { border-radius: 21px 21px 0 0; }
  .library img { width: 100%; height: auto; margin-top: -32%; }
  .hero-back { top: 27px; width: 53%; border-radius: 16px; }
  .hero-back-left { left: 0; }
  .hero-back-right { right: 0; }
  .tour-intro { display: block; padding-block: 57px 38px; }
  .tour-intro h2 { font-size: 38px; max-width: 450px; }
  .tour-intro-right > p { font-size: 15px; margin-top: 24px; }
  .tour-index { grid-template-columns: 1fr 1fr; margin-top: 22px; gap: 0 16px; }
  .tour-index a { font-size: 12px; min-height: 49px; gap: 7px; }
  .tour-index a .index-arrow { display: none; }
  .chapter { grid-template-columns: 1fr; gap: 36px; padding-block: 50px; min-height: 0; }
  .chapter-copy { grid-column: 1; grid-row: 1; }
  .chapter h3 { font-size: clamp(37px,9.7vw,48px); margin-top: 17px; }
  .chapter-body { margin-top: 21px; font-size: 15px; line-height: 1.75; max-width: 490px; }
  .chapter-detail { margin-top: 22px; font-size: 13px; }
  .chapter-visual { grid-column: 1; grid-row: 2; width: min(280px, 88%); }
  .screen-tasting, html[lang="de"] .screen-ask { width: min(340px, 100%); }
  .chapter-number { font-size: 25px; }
  .chapter-label { font-size: 12px; }
  .tour-footnote { padding-block: 22px 32px; font-size: 11px; }
  .closing { padding-block: 44px; }
  .closing-inner { flex-direction: column; align-items: stretch; gap: 30px; }
  .closing-brand { font-size: 25px; margin-bottom: 20px; }
  .closing h2 { font-size: 37px; }
  .closing p:not(.closing-brand) { font-size: 14px; margin-top: 15px; }
  .closing-downloads { width: 100%; min-width: 0; }
  .closing-downloads p { margin-bottom: 8px; }
  .store-link { font-size: 14px; }
  .site-footer { padding-block: 30px 24px; }
  .footer-links { gap: 9px 18px; }
}
@media (max-width: 360px) {
  .hero-inner { padding-top: 26px; gap: 24px; }
  .hero h1 { font-size: 53px; }
  .download-links { gap: 15px; }
  .hero-art { height: 160px; }
  .tour-index { gap: 0 12px; }
  .tour-index a { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero-art { transform: none !important; }
  .reading-progress { display: none; }
}
@media print {
  .reading-progress, .hero-back, .hero-orbit, .tour-stage, .tour-index { display: none !important; }
  .tour-ready .tour { display: block; }
  .tour-ready .chapter { display: grid; min-height: 0; break-inside: avoid; grid-template-columns: 1fr 1fr; }
  .tour-ready .chapter-visual { position: static; clip: auto; width: 180px; height: auto; margin: 0; overflow: visible; white-space: normal; }
}