/* Pages for search engines (scripts/seo/site.ts); fonts and world colors as on the landing page */
@font-face { font-family: "Atkinson Hyperlegible Next Variable"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/landing/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next Variable"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/landing/fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque Variable"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/landing/fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Bricolage Grotesque Variable"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/landing/fonts/bricolage-grotesque-latin-ext-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
:root {
  --display: "Bricolage Grotesque Variable", "Avenir Next", system-ui, sans-serif;
  --sans: "Atkinson Hyperlegible Next Variable", -apple-system, system-ui, sans-serif;
  --ground: #f3f4f3; --surface: #fff; --ink: #16191c; --muted: #5a6168; --line: #dadddc;
  --der-bg: #d7e8fb; --der-ink: #0e2f6b; --der-tex: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'18'%20height%3D'18'%3E%3Cg%20fill%3D'none'%20stroke%3D'rgba(255%2C255%2C255%2C0.9)'%20stroke-width%3D'1.17'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20transform%3D'translate(4.5%2C4.5)%20scale(0.6)'%20d%3D'M-4%2C0L4%2C0M-2%2C-3.46L2%2C3.46M-2%2C3.46L2%2C-3.46'%2F%3E%3Cpath%20transform%3D'translate(13.5%2C13.5)%20rotate(25)%20scale(0.6)'%20d%3D'M-4%2C0L4%2C0M-2%2C-3.46L2%2C3.46M-2%2C3.46L2%2C-3.46'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --die-bg: #fce1d3; --die-ink: #8a2a0b; --die-tex: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'18'%20height%3D'18'%3E%3Cg%20fill%3D'none'%20stroke%3D'rgba(238%2C106%2C50%2C0.5)'%20stroke-width%3D'1.17'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20transform%3D'translate(4.5%2C4.5)%20scale(0.6)'%20d%3D'M0%2C4C-2.6%2C4%20-3.4%2C1.2%20-1.6%2C-1.2C-1.4%2C0.2%20-0.6%2C0.6%200%2C0.2C-0.4%2C-1.6%200.4%2C-3.4%201%2C-4.4C2.6%2C-2.8%203.4%2C-0.4%202.8%2C1.6C2.4%2C3.2%201.4%2C4%200%2C4Z'%2F%3E%3Cpath%20transform%3D'translate(13.5%2C13.5)%20rotate(25)%20scale(0.6)'%20d%3D'M0%2C4C-2.6%2C4%20-3.4%2C1.2%20-1.6%2C-1.2C-1.4%2C0.2%20-0.6%2C0.6%200%2C0.2C-0.4%2C-1.6%200.4%2C-3.4%201%2C-4.4C2.6%2C-2.8%203.4%2C-0.4%202.8%2C1.6C2.4%2C3.2%201.4%2C4%200%2C4Z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --das-bg: #1f5a3a; --das-ink: #fff; --das-tex: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'18'%20height%3D'18'%3E%3Cg%20fill%3D'none'%20stroke%3D'rgba(255%2C255%2C255%2C0.22)'%20stroke-width%3D'1.17'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20transform%3D'translate(4.5%2C4.5)%20scale(0.6)'%20d%3D'M-3.5%2C3.5C-3.5%2C-1%20-1%2C-3.5%203.5%2C-3.5C3.5%2C1%201%2C3.5%20-3.5%2C3.5ZM-3.5%2C3.5L1.2%2C-1.2'%2F%3E%3Cpath%20transform%3D'translate(13.5%2C13.5)%20rotate(25)%20scale(0.6)'%20d%3D'M-3.5%2C3.5C-3.5%2C-1%20-1%2C-3.5%203.5%2C-3.5C3.5%2C1%201%2C3.5%20-3.5%2C3.5ZM-3.5%2C3.5L1.2%2C-1.2'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --der: #1d55c0; --die: #c2381a; --das: #1e7a45;
}
* { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 17px/1.6 var(--sans); }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
.wrap { max-width: 880px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
h1, h2, h3 { font-family: var(--display); letter-spacing: -0.02em; text-wrap: balance; line-height: 1.12; margin: 0; }
h1 { font-size: clamp(32px, 6vw, 46px); font-weight: 800; }
h2 { font-size: clamp(22px, 3.6vw, 28px); font-weight: 800; }
h3 { font-size: 19px; font-weight: 700; }
p { margin: 0; }
.muted { color: var(--muted); }
/* German inside an English sentence is set in italics; tiles, chips, examples and tables stay upright */
p [lang="de"], h1 [lang="de"], h2 [lang="de"], .plain [lang="de"], td [lang="de"] { font-style: italic; }
.tile [lang="de"], .ex [lang="de"], .chips [lang="de"], table b[lang="de"] { font-style: normal; }
nav.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(18px, env(safe-area-inset-top)) 0 18px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 21px; letter-spacing: -0.02em; }
.brand img { width: 36px; height: 36px; border-radius: 10px; }
.nw { white-space: nowrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; }
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); }
main { display: grid; gap: 40px; padding-bottom: 24px; }
main > section, .intro { display: grid; gap: 12px; }
.intro p { max-width: 62ch; color: #3b4148; }
.lead { font-size: 19px; }
.word { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 28px; align-items: center; }
@media (max-width: 640px) { .word { grid-template-columns: minmax(0, 1fr); } .tile { max-width: 320px; } }
.tile { border-radius: 28px; padding: 22px 18px; display: grid; justify-items: center; gap: 4px; background-size: 18px 18px; text-align: center; }
.tile.der { background-color: var(--der-bg); color: var(--der-ink); background-image: var(--der-tex); }
.tile.die { background-color: var(--die-bg); color: var(--die-ink); background-image: var(--die-tex); }
.tile.das { background-color: var(--das-bg); color: var(--das-ink); background-image: var(--das-tex); }
.tile img { width: 180px; height: 180px; object-fit: contain; }
.tile .name { font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.tile .world { font-size: 14px; font-weight: 700; }
.locked { width: 180px; height: 180px; border: 2px dashed currentColor; border-radius: 24px; opacity: .75; display: grid; place-content: center; justify-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.about { display: grid; gap: 14px; min-width: 0; }
.answer { font-size: 21px; line-height: 1.4; }
.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; }
.rule, .langs, .cta, .related, .card { background: var(--surface); border-radius: 24px; padding: 22px; }
.rule p { max-width: 64ch; }
.langs dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px 20px; margin: 0; }
.langs dt { font-size: 13px; color: var(--muted); }
.langs dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
/* A language that reads the other way than the page keeps its own direction, aligned with the page */
:root:not([dir="rtl"]) .langs [dir="rtl"] { text-align: left; }
[dir="rtl"] .langs [dir="ltr"] { text-align: right; }
/* German inside a right-to-left page (Arabic, Persian, Dari, Pashto) reads left to right */
[dir="rtl"] [lang="de"] { direction: ltr; unicode-bidi: isolate; }
.cta { background: var(--ink); color: #fff; }
.cta p { color: #c9ced3; max-width: 60ch; }
.cta .btn { background: #fff; color: var(--ink); justify-self: start; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--ground); text-decoration: none; font-weight: 600; }
.chips a:hover { text-decoration: underline; }
/* Words without a page of their own (rule examples outside the decks) */
.chips li > span[lang] { display: inline-block; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); }
.chips a span.der { color: var(--der); }
.chips a span.die { color: var(--die); }
.chips a span.das { color: var(--das); }
.level { display: grid; gap: 22px; }
.level > section { display: grid; gap: 10px; }
.count { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.jump { display: flex; gap: 10px; }
.jump a { padding: 6px 16px; border-radius: 999px; background: var(--surface); font-weight: 700; text-decoration: none; }
.guides { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.guides a { display: grid; gap: 4px; padding: 18px 20px; border-radius: 20px; background: var(--surface); text-decoration: none; }
.guides a b { font-family: var(--display); font-size: 20px; letter-spacing: -0.01em; }
.guides a span { color: var(--muted); }
.guide section { display: grid; gap: 12px; }
.guide section p, .guide section li { max-width: 66ch; }
.guide ul.plain { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.table { overflow-x: auto; background: var(--surface); border-radius: 18px; }
table { border-collapse: collapse; width: 100%; font-size: 16px; }
@media (max-width: 480px) { table { font-size: 15px; } th, td { padding: 9px 8px; } }
th, td { text-align: left; padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: top; }
thead th { border-top: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
td b.der, .ex b.der { color: var(--der); } td b.die, .ex b.die { color: var(--die); } td b.das, .ex b.das { color: var(--das); }
.ex { display: block; margin-top: 8px; font-size: 19px; background: var(--surface); border-radius: 16px; padding: 14px 18px; }
.ex small { display: block; font-size: 15px; color: var(--muted); }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 32px 0 max(32px, env(safe-area-inset-bottom)); font-size: 14px; color: var(--muted); }
footer .links { display: flex; flex-wrap: wrap; gap: 8px 16px; }