/* inspAIred studio · books — shared styles for the book landing pages.
   One idea carries the design: a coloring page that colors itself in.
   Each book sets its own palette on <body data-book="…">. */

@font-face { font-family: "Poppins"; src: url("fonts/poppins-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/poppins-medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/poppins-bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Lora"; src: url("fonts/lora-italic-variable.woff") format("woff"); font-weight: 400 700; font-style: italic; font-display: swap; }

/* ---------- palettes ---------- */
:root {
  --paper: #fffaf7; --paper-2: #ffffff; --ink: #2d1b36; --ink-soft: #5f4d68; --line: #2d1b3619;
  --c1: #e6408f; --c2: #9d82ef; --c3: #3fc49b; --c4: #ffcf3f; --c5: #6fb0e0;
  --btn: #e6408f; --btn-ink: #ffffff; --spine: #5c9fb4;
  --wash: radial-gradient(38% 44% at 18% 28%, #ff9fcb 0 35%, transparent 75%),
          radial-gradient(34% 40% at 76% 24%, #bda6ff 0 35%, transparent 75%),
          radial-gradient(40% 36% at 56% 70%, #8fe3c6 0 35%, transparent 75%),
          radial-gradient(28% 30% at 26% 80%, #ffe07a 0 35%, transparent 75%),
          radial-gradient(26% 28% at 90% 74%, #ffb3d8 0 35%, transparent 75%),
          radial-gradient(22% 26% at 46% 34%, #ffd0e6 0 35%, transparent 75%),
          radial-gradient(30% 22% at 50% 4%, #c8e6ff 0 35%, transparent 75%),
          linear-gradient(#fff3fa, #fff3fa);
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --note: "Lora", Georgia, serif;
  --wrap: 1180px;
}
body[data-book="tiny-town"] {
  --paper: #f5faff; --ink: #0d2a4c; --ink-soft: #46607f; --line: #0d2a4c1a;
  --c1: #e8442e; --c2: #1f8be0; --c3: #4fae2a; --c4: #ffc928; --c5: #ff8a1f;
  --btn: #e8442e; --spine: #2f8f65;
  --wash: radial-gradient(36% 42% at 16% 34%, #ffd060 0 35%, transparent 75%),
          radial-gradient(40% 34% at 50% 14%, #8fcbff 0 35%, transparent 75%),
          radial-gradient(30% 34% at 82% 44%, #ffa48f 0 35%, transparent 75%),
          radial-gradient(50% 30% at 50% 92%, #ade08a 0 35%, transparent 75%),
          radial-gradient(22% 26% at 32% 70%, #ff8f73 0 35%, transparent 75%),
          radial-gradient(24% 26% at 66% 64%, #ffe27a 0 35%, transparent 75%),
          radial-gradient(26% 20% at 88% 10%, #b5e1ff 0 35%, transparent 75%),
          linear-gradient(#f0f9ff, #f0f9ff);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.65 var(--font); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-weight: 700; letter-spacing: -.025em; line-height: 1.08; margin: 0; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--c2); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 100; background: #fff; padding: 10px 14px; border-radius: 10px; }
.note { font-family: var(--note); font-style: italic; color: var(--ink-soft); font-size: 1.02rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(12px) saturate(140%); border-bottom: 1px solid var(--line); }
.top .wrap { height: 70px; display: flex; align-items: center; gap: 22px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; letter-spacing: -.02em; font-size: 1.02rem; }
.brand img { width: 38px; height: 38px; transition: transform .5s cubic-bezier(.2, 1.5, .4, 1); }
.brand:hover img { transform: rotate(-10deg) scale(1.08); }
.brand b { color: var(--c2); font-weight: 700; }
.top nav { display: flex; gap: 4px; margin-left: auto; }
.top nav a { text-decoration: none; padding: 8px 12px; border-radius: 999px; font-size: .94rem; font-weight: 500; color: var(--ink-soft); }
.top nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--c4) 22%, transparent); }
.top .lang { font-weight: 700; color: var(--ink); border: 1.5px solid var(--line); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 12px 24px; border-radius: 999px; font: 700 1rem/1.2 var(--font); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background-color .2s; }
.btn-main { background: var(--btn); color: var(--btn-ink); box-shadow: 0 4px 0 color-mix(in srgb, var(--btn) 60%, #000); }
.btn-main:hover { transform: translateY(-2px); box-shadow: 0 6px 0 color-mix(in srgb, var(--btn) 60%, #000); }
.btn-main:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--btn) 60%, #000); }
.btn-line { border-color: var(--ink); color: var(--ink); background: var(--paper-2); }
.btn-line:hover { background: color-mix(in srgb, var(--c4) 35%, #fff); }
.btn-small { min-height: 42px; padding: 8px 18px; font-size: .92rem; }
.btn svg { width: 18px; height: 18px; }

/* ---------- hero ---------- */
.hero { padding: clamp(40px, 7vw, 96px) 0 clamp(56px, 8vw, 110px); position: relative; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.hero h1 { font-size: clamp(2.8rem, 6.6vw, 5.6rem); letter-spacing: -.045em; line-height: .98; margin: 14px 0 22px; }
.hero h1 span { display: inline-block; }
.hero .for { font-weight: 500; color: var(--ink-soft); }
.hero .lead { font-size: clamp(1.08rem, 1.6vw, 1.24rem); max-width: 34em; color: var(--ink-soft); }
.facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 30px; padding: 0; list-style: none; }
.facts li { padding: 8px 16px; border-radius: 999px; background: var(--paper-2); border: 1.5px solid var(--line); font-weight: 500; font-size: .95rem; }
.facts li b { font-weight: 700; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .note { margin-top: 18px; max-width: 36em; }

/* 3D paperback: the cover, a spine and the page block, so the book has real thickness */
.book3d { perspective: 1800px; display: grid; place-items: center; padding: 6% 4%; }
.book3d .b { --t: clamp(18px, 2.4vw, 26px); position: relative; width: min(100%, 470px); aspect-ratio: 1; transform-style: preserve-3d;
  transform: rotateY(var(--ry, -32deg)) rotateX(var(--rx, 6deg)); transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.book3d .b > * { position: absolute; }
.book3d .front { inset: 0; transform: translateZ(calc(var(--t) / 2)); border-radius: 2px 6px 6px 2px; overflow: hidden; box-shadow: inset 4px 0 6px -2px rgba(0, 0, 0, .25); }
.book3d .front img { width: 100%; height: 100%; object-fit: cover; }
.book3d .front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 36%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .12) 100%); pointer-events: none; }
.book3d .pages { top: .8%; bottom: .8%; left: calc(100% - var(--t) / 2 - 1px); width: var(--t); transform: rotateY(90deg);
  background: repeating-linear-gradient(90deg, #fbf8f3 0 1px, #e9e2d6 1px 2px); box-shadow: inset 0 0 6px rgba(0, 0, 0, .12); }
.book3d .spine { top: 0; bottom: 0; left: calc(var(--t) / -2); width: var(--t); transform: rotateY(-90deg); background: var(--spine); }
.book3d .back { inset: 0; transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); background: var(--spine); border-radius: 6px 2px 2px 6px; }
.book3d { position: relative; }
.book3d::after { content: ""; position: absolute; left: 14%; right: 6%; bottom: 3%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(40, 20, 50, .3), transparent); filter: blur(8px); z-index: -1; }
.book3d .sticker { z-index: 3; right: -6%; top: -7%; transform: translateZ(40px) rotate(10deg); width: clamp(86px, 9vw, 118px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center;
  background: var(--c4); color: var(--ink); font-weight: 700; line-height: 1.05; font-size: clamp(.86rem, 1vw, 1.02rem); box-shadow: 0 0 0 5px #fff, 0 12px 24px rgba(0, 0, 0, .18); text-decoration: none; transition: transform .4s cubic-bezier(.2, 1.6, .4, 1); }
.book3d .sticker:hover { transform: translateZ(40px) rotate(-4deg) scale(1.06); }

/* ---------- sections ---------- */
.sec { padding: clamp(64px, 9vw, 120px) 0; }
.sec-head { max-width: 640px; margin-bottom: clamp(30px, 4vw, 48px); }
.sec-head h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 14px; }
.sec-head p { color: var(--ink-soft); font-size: 1.08rem; }
.center { text-align: center; margin-inline: auto; }

/* inside the book: a page strip; each page colors in when you point at it */
.inside { background: var(--paper-2); border-block: 1px solid var(--line); }
.strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 2vw, 22px); padding: 0; margin: 0; list-style: none; }
.strip li:nth-child(odd) { transform: rotate(-1.4deg); }
.strip li:nth-child(even) { transform: rotate(1.2deg) translateY(14px); }
.pagebtn { all: unset; cursor: zoom-in; display: block; width: 100%; }
.pagebtn:focus-visible { outline: 3px solid var(--c2); outline-offset: 6px; border-radius: 4px; }
.colorable { position: relative; isolation: isolate; background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 0 var(--line), 0 14px 30px -12px rgba(0, 0, 0, .22); }
.colorable img { position: relative; z-index: 1; mix-blend-mode: multiply; width: 100%; }
.colorable::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--wash); opacity: 0; transition: opacity .6s ease; }
.pagebtn:hover .colorable::before, .pagebtn:focus-visible .colorable::before { opacity: 1; }
.strip figcaption { margin-top: 12px; text-align: center; font-weight: 500; font-size: .92rem; color: var(--ink-soft); }
.strip-hint { margin-top: 34px; }

/* free page: the one orchestrated moment — color brushes across the line art */
.free .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.free-art { position: relative; }
.free-art .colorable { border-radius: 6px; box-shadow: 0 0 0 10px #fff, 0 0 0 11px var(--line), 0 30px 60px -24px rgba(0, 0, 0, .3); transform: rotate(-1.2deg); }
.free-art .colorable::before { opacity: 1; -webkit-mask: linear-gradient(100deg, #000 45%, transparent 55%) 100% 0 / 260% 100% no-repeat; mask: linear-gradient(100deg, #000 45%, transparent 55%) 100% 0 / 260% 100% no-repeat; transition: none; }
.free-art.is-painted .colorable::before { animation: brush 2.6s cubic-bezier(.45, .05, .25, 1) .2s both; }
.free-art.is-lines .colorable::before { opacity: 0; transition: opacity .4s; }
@keyframes brush { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0% 0; mask-position: 0% 0; } }
.free-art .crayon { position: absolute; z-index: 3; width: 74px; height: 16px; left: 0; top: 0; border-radius: 3px 10px 10px 3px; background: linear-gradient(var(--c1), color-mix(in srgb, var(--c1) 70%, #000)); opacity: 0; pointer-events: none; transform: rotate(-28deg); }
.free-art .crayon::after { content: ""; position: absolute; right: -12px; top: 2px; border-left: 14px solid color-mix(in srgb, var(--c1) 80%, #000); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.free-art.is-painted .crayon { animation: crayon 2.6s cubic-bezier(.45, .05, .25, 1) .2s both; }
@keyframes crayon {
  0% { opacity: 0; left: 2%; top: 24%; }
  8% { opacity: 1; }
  30% { left: 26%; top: 62%; }
  55% { left: 50%; top: 22%; }
  82% { left: 74%; top: 64%; opacity: 1; }
  100% { left: 96%; top: 32%; opacity: 0; }
}
.free .sticker-flat { position: absolute; z-index: 4; left: -14px; top: -18px; transform: rotate(-9deg); background: var(--c4); padding: 8px 16px; border-radius: 999px; font-weight: 700; box-shadow: 0 0 0 4px #fff, 0 8px 18px rgba(0, 0, 0, .15); }
.switch { margin-top: 26px; display: inline-flex; padding: 4px; border-radius: 999px; background: var(--paper-2); border: 1.5px solid var(--line); }
.switch button { all: unset; cursor: pointer; padding: 7px 16px; border-radius: 999px; font-weight: 500; font-size: .92rem; color: var(--ink-soft); }
.switch button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.switch button:focus-visible { outline: 3px solid var(--c2); outline-offset: 2px; }
.free-copy h2 { font-size: clamp(2rem, 3.8vw, 3rem); margin-bottom: 16px; }
.free-copy > p { color: var(--ink-soft); }
.formats { list-style: none; padding: 0; margin: 26px 0; display: grid; gap: 12px; }
.formats li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: baseline; padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.formats b { font-weight: 700; }
.formats span { color: var(--ink-soft); font-size: .96rem; }

/* steps (tiny town only: download, print, color is a real sequence) */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: s; }
.steps li { counter-increment: s; padding: 26px; border-radius: 18px; background: var(--paper-2); border: 1.5px solid var(--line); }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c4); font-weight: 700; font-size: 1.2rem; margin-bottom: 14px; }
.steps h3 { font-size: 1.2rem; margin-bottom: 6px; }
.steps p { color: var(--ink-soft); }

/* what you get: sudoku-grid style for tiny town, flower list for butterflies */
.what .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 6vw, 80px); align-items: center; }
.what-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; border: 2.5px solid var(--ink); border-radius: 14px; overflow: hidden; background: var(--paper-2); }
.what-list li { padding: 22px; border-right: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line); }
.what-list li:nth-child(2n) { border-right: 0; }
.what-list li:nth-last-child(-n+2) { border-bottom: 0; }
.what-list b { display: block; font-size: 1.12rem; margin-bottom: 4px; }
.what-list span { color: var(--ink-soft); font-size: .95rem; }
.what-note { margin-top: 18px; padding: 14px 18px; border-left: 4px solid var(--c4); background: color-mix(in srgb, var(--c4) 16%, #fff); border-radius: 8px; font-size: .96rem; }

/* faq */
.faq .wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 80px); }
.faq details { border-bottom: 1.5px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 18px; padding: 20px 0; font-weight: 500; font-size: 1.06rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 1.5rem; line-height: 1; transition: transform .3s; color: var(--c1); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--ink-soft); max-width: 40em; }

/* author */
.author { background: var(--paper-2); border-top: 1px solid var(--line); }
.author .wrap { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 32px; align-items: center; max-width: 820px; }
.author img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 6px #fff, 0 0 0 8px var(--c4); }
.author h2 { font-size: 1.6rem; margin-bottom: 8px; }
.author p { color: var(--ink-soft); }
.author a { font-weight: 500; }

/* shelf: other books */
.shelf { padding: clamp(56px, 8vw, 96px) 0; }
.shelf h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 26px; }
.shelf ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 26px; }
.shelf a { display: block; text-decoration: none; }
.shelf img { aspect-ratio: 1; object-fit: cover; border-radius: 3px 6px 6px 3px; box-shadow: inset 6px 0 8px -4px rgba(0, 0, 0, .3), 0 18px 30px -16px rgba(0, 0, 0, .35); transition: transform .45s cubic-bezier(.2, 1.4, .4, 1); }
.shelf img.tall { aspect-ratio: 3 / 4.6; object-position: center; }
.shelf a:hover img { transform: translateY(-8px) rotate(-1.5deg); }
.shelf b { display: block; margin-top: 14px; font-weight: 700; hyphens: auto; overflow-wrap: anywhere; }
.shelf span { color: var(--ink-soft); font-size: .92rem; }

/* footer */
.foot { padding: 34px 0 40px; border-top: 1px solid var(--line); font-size: .92rem; color: var(--ink-soft); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot nav a { text-decoration: none; }
.foot nav a:hover { color: var(--ink); text-decoration: underline; }
.foot .tm { flex-basis: 100%; font-size: .82rem; opacity: .85; }

/* lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(92vw, 820px); width: 100%; }
.lightbox::backdrop { background: rgba(20, 12, 24, .72); backdrop-filter: blur(4px); }
.lightbox figure { margin: 0; background: #fff; border-radius: 10px; padding: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .4); }
.lightbox img { width: 100%; max-height: 78vh; object-fit: contain; }
.lightbox figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 4px 2px; font-weight: 500; }
.lightbox .row { display: flex; gap: 8px; }
.lightbox button { all: unset; cursor: pointer; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); font-weight: 500; font-size: .92rem; }
.lightbox button:hover { background: color-mix(in srgb, var(--c4) 30%, #fff); }
.lightbox button:focus-visible { outline: 3px solid var(--c2); }

/* toast + confetti */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 80; transform: translate(-50%, 220%); visibility: hidden; padding: 12px 22px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 500; box-shadow: 0 14px 30px rgba(0, 0, 0, .25); transition: transform .35s cubic-bezier(.2, 1.4, .4, 1); }
.toast.show { transform: translate(-50%, 0); visibility: visible; }
.bit { position: fixed; z-index: 90; width: 9px; height: 22px; border-radius: 2px 2px 4px 4px; pointer-events: none; animation: fly .95s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes fly { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  .hero .wrap, .free .wrap, .what .wrap, .faq .wrap { grid-template-columns: minmax(0, 1fr); }
  .book3d { order: -1; padding: 2% 8% 0; }
  .book3d .b { width: min(78%, 400px); }
  .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .top nav a:not(.lang) { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { width: min(var(--wrap), 100% - 32px); }
  .top .wrap { gap: 10px; height: 62px; }
  .brand span { display: none; }
  .top .btn-small { padding: 8px 14px; font-size: .86rem; }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip li:last-child { display: none; }
  .shelf ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .what-list { grid-template-columns: 1fr; }
  .what-list li { border-right: 0 !important; border-bottom: 1.5px solid var(--line) !important; }
  .what-list li:last-child { border-bottom: 0 !important; }
  .author .wrap { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .formats li { grid-template-columns: 52px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .free-art .crayon { display: none; }
}

/* ---------- two languages in one page ---------- */
html[lang="de"] [data-l="en"], html:not([lang="de"]) [data-l="de"] { display: none !important; }
.grow { margin-left: auto; }

/* EN / DE switch: a dark pill slides under the active language */
.langs { position: relative; display: inline-flex; padding: 3px; border-radius: 999px; background: var(--paper-2); border: 1.5px solid var(--line); flex: 0 0 auto; }
.langs::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: 42px; border-radius: 999px; background: var(--ink); transition: transform .45s cubic-bezier(.2, 1.5, .4, 1); }
html[lang="de"] .langs::before { transform: translateX(42px); }
.langs a { position: relative; z-index: 1; width: 42px; padding: 6px 0; text-align: center; border-radius: 999px; font-weight: 700; font-size: .86rem; letter-spacing: .02em; text-decoration: none; color: var(--ink-soft); transition: color .3s; }
.langs a[aria-current], html:not([lang="de"]) .langs [data-setlang="en"], html[lang="de"] .langs [data-setlang="de"] { color: #fff; }
.langs a:focus-visible { outline-offset: 1px; }

/* switching: the book turns on its edge and the other edition turns in */
.book3d .b.turn-out { animation: turn-out .25s cubic-bezier(.55, 0, .9, .45) forwards; }
.book3d .b.turn-in { animation: turn-in .65s cubic-bezier(.15, .85, .3, 1.12) both; }
@keyframes turn-out { to { transform: rotateY(90deg) rotateX(6deg); } }
@keyframes turn-in { from { transform: rotateY(-90deg) rotateX(6deg); } }
.pane-in .hero .copy, .pane-in > section:not(.hero) { animation: pane-in .45s ease both; }
@keyframes pane-in { from { opacity: 0; } }

/* shelf heading with the link to all books */
.shelf-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 26px; }
.shelf-head h2 { margin: 0; }
.shelf-head a { font-weight: 500; color: var(--ink-soft); }
.shelf-head a:hover { color: var(--ink); }
.shelf { border-top: 1px solid var(--line); }

/* 404 */
.lost .wrap { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.lost-cover { width: min(100%, 360px); justify-self: center; border-radius: 3px 6px 6px 3px; transform: rotate(4deg); box-shadow: inset 6px 0 8px -4px rgba(0, 0, 0, .3), 0 30px 50px -20px rgba(0, 0, 0, .4); animation: lost-bob 6s ease-in-out infinite; }
@keyframes lost-bob { 50% { transform: rotate(1deg) translateY(-10px); } }

@media (max-width: 920px) {
  .top nav { display: none; }
  .top .langs { margin-left: auto; }
  .lost-cover { order: -1; width: min(60%, 260px); }
}
@media (max-width: 380px) {
  .langs::before { width: 36px; } html[lang="de"] .langs::before { transform: translateX(36px); }
  .langs a { width: 36px; }
}
.pagebtn .colorable { display: block; }

/* ---------- pages without the color wash: they hop when you point at them ---------- */
.sheet { display: block; position: relative; background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 0 var(--line), 0 14px 30px -12px rgba(0, 0, 0, .22); }
.sheet img { width: 100%; }
.pagebtn .sheet { transition: transform .45s cubic-bezier(.2, 1.7, .4, 1), box-shadow .3s; }
.pagebtn:hover .sheet, .pagebtn:focus-visible .sheet { transform: translateY(-12px) rotate(3deg) scale(1.05); box-shadow: 0 26px 36px -16px rgba(0, 0, 0, .3); }
.strip li:nth-child(even) .pagebtn:hover .sheet { transform: translateY(-12px) rotate(-3deg) scale(1.05); }

/* free page: a little show on hover (and once on touch screens when it scrolls into view) */
.free-art { position: relative; isolation: isolate; cursor: pointer; }
.free-art .sheet { z-index: 2; transform: rotate(-1.2deg); }
.free-art:hover .sheet, .free-art.play .sheet { animation: sheet-boing .8s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes sheet-boing { 0% { transform: rotate(-1.2deg); } 30% { transform: rotate(2deg) scale(1.035) translateY(-10px); } 60% { transform: rotate(-.6deg) scale(1.01); } 100% { transform: rotate(.8deg) scale(1.02); } }
.free-art .sticker-flat { transition: transform .5s cubic-bezier(.2, 1.8, .4, 1); }
.free-art:hover .sticker-flat, .free-art.play .sticker-flat { transform: rotate(8deg) scale(1.15); }
.fun { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
@media (prefers-reduced-motion: reduce) {
  .free-art:hover .sheet, .free-art.play .sheet { animation: none; }
}