@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,650;9..144,700&display=swap");
:root {
  --ink: #163e35;
  --muted: #51665b;
  --paper: #f6f2e7;
  --white: #fffdf6;
  --rust: #b84d2b;
  --gold: #e6c46a;
  --line: #d3d9c9;
  --companion-preview-accent: #b84d2b;
  color-scheme: light;
  font-family: "DM Sans", sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 85px;
}
body {
  margin: 0;
}
a {
  color: inherit;
  text-underline-offset: 4px;
}
button,
input,
select {
  font: inherit;
}
button,
a.button {
  cursor: pointer;
}
button,
.button {
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fffdf6;
  border-radius: 7px;
  padding: 13px 20px;
  font-weight: 700;
  min-height: 46px;
  text-decoration: none;
}
button:hover,
.button:hover {
  background: #285849;
}
button:disabled {
  cursor: default;
  opacity: 0.65;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--rust);
  outline-offset: 5px;
}
p {
  line-height: 1.75;
}
h1,
h2,
h3 {
  font-family: Fraunces, Georgia, serif;
  line-height: 1.14;
  letter-spacing: -0.035em;
}
h1 {
  font-size: clamp(3.3rem, 5.6vw, 5.8rem);
  margin: 20px 0 25px;
  font-weight: 650;
}
h1 em {
  color: var(--rust);
  font-weight: 500;
}
h2 {
  font-size: clamp(2rem, 3.7vw, 3.25rem);
  margin: 12px 0 20px;
}
h3 {
  font-size: 1.6rem;
  margin: 10px 0 16px;
}
p {
  margin: 0 0 18px;
}
.eyebrow,
.kicker {
  font-size: 0.73rem;
  letter-spacing: 0.15em;
  font-weight: 700;
  line-height: 1.7;
}
.eyebrow {
  color: var(--rust);
}
.kicker {
  color: var(--muted);
}
.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 100;
  background: white;
  padding: 14px;
}
.skip-link:focus {
  top: 12px;
}
.topbar {
  max-width: 1400px;
  margin: auto;
  padding: 25px 4.5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  gap: 24px;
}
.brand {
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 0.95rem;
  display: grid;
  grid-template-columns: 30px auto;
  align-items: center;
}
.brand small {
  grid-column: 2;
  font-size: 0.55rem;
  letter-spacing: 0.22em;
}
.brand-mark {
  grid-row: span 2;
  font-size: 1.8rem;
  color: var(--rust);
}
nav {
  display: flex;
  gap: 25px;
  font-size: 0.9rem;
}
nav a {
  text-decoration: none;
}
nav a:hover {
  color: var(--rust);
}
main {
  max-width: 1280px;
  margin: auto;
  padding: 0 36px;
}
.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 64px 0 48px;
}
.hero-copy {
  padding: 5px 0;
}
.lede {
  max-width: 510px;
  font-size: 1.08rem;
  color: var(--muted);
}
.hero-actions {
  display: flex;
  gap: 22px;
  align-items: center;
  margin: 28px 0;
}
.hero-note {
  font-size: 0.8rem;
  max-width: 400px;
  color: var(--muted);
}
.hero-art {
  position: relative;
  margin: 0;
  background: var(--ink);
  border-radius: 150px 150px 12px 12px;
  overflow: hidden;
  min-height: 510px;
  box-shadow: 12px 14px 0 #e3e4d3;
  isolation: isolate;
}
.hero-art img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  z-index: -2;
}
.hero-art:after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(transparent, #102b26ed);
  z-index: -1;
}
.hero-art figcaption {
  position: absolute;
  bottom: 30px;
  left: 30px;
  right: 20px;
  color: white;
  display: grid;
  gap: 8px;
}
.hero-art figcaption span,
.hero-art figcaption small {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}
.hero-art figcaption strong {
  font:
    600 1.7rem Fraunces,
    Georgia,
    serif;
}
.stamp {
  position: absolute;
  right: 24px;
  top: 30px;
  background: var(--gold);
  color: var(--ink);
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  transform: rotate(12deg);
  border: 4px double var(--ink);
}
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 25px 0;
  gap: 22px;
}
.metrics div {
  display: flex;
  gap: 14px;
  align-items: center;
}
.metrics strong {
  font:
    600 2.5rem Fraunces,
    Georgia,
    serif;
}
.metrics span {
  font-size: 0.78rem;
  color: var(--muted);
  max-width: 140px;
  line-height: 1.5;
}
.section {
  padding: 78px 0;
  border-bottom: 1px solid var(--line);
}
.section-heading {
  max-width: 750px;
  margin-bottom: 32px;
}
.section-heading > p:last-child {
  color: var(--muted);
}
.guide-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.guide-card {
  padding: 24px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
}
.guide-card h3 {
  font-size: 1.45rem;
}
.guide-card p {
  font-size: 0.9rem;
}
.section-cards {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  color: var(--muted);
  font-size: 0.8rem !important;
}
.fieldbook {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.exercise {
  background: #e8ebdc;
  padding: 30px;
  border-radius: 12px;
  align-self: start;
}
.hand-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 20px 0;
}
.hand-list span {
  background: var(--white);
  padding: 9px 11px;
  border: 1px solid #c7cfb9;
  border-radius: 5px;
  font-size: 0.85rem;
}
.quiz-controls {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}
.quiz-controls[hidden],
[hidden] {
  display: none !important;
}
details {
  border-top: 1px solid #c3ccba;
  padding: 18px 0;
}
summary {
  cursor: pointer;
  font-weight: 700;
  line-height: 1.55;
  padding-right: 10px;
}
details[open] summary {
  margin-bottom: 18px;
  color: var(--rust);
}
details p {
  font-size: 0.94rem;
}
details p:last-child {
  margin-bottom: 0;
}
.discover-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}
.steps {
  list-style: none;
  padding: 0;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 48px;
  margin-bottom: 28px;
}
.steps li:before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  display: grid;
  place-items: center;
  font-size: 0.85rem;
}
.steps p {
  font-size: 0.95rem;
  margin-top: 7px;
}
.callout {
  border-left: 4px solid var(--rust);
  padding: 12px 18px;
  background: #efe4d5;
  font-size: 0.95rem;
}
.demo-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 25px 0;
}
.demo-cards span {
  border: 1px solid #bbc6af;
  border-radius: 6px;
  background: var(--white);
  padding: 18px 10px;
  font-size: 0.63rem;
  min-height: 114px;
  transition: border-color 0.15s;
}
.demo-cards strong {
  display: block;
  font-size: 0.85rem;
  margin-top: 12px;
  overflow-wrap: anywhere;
}
.demo-cards span.active {
  border: 3px solid var(--rust);
  padding: 16px 8px;
}
.discovery-demo button {
  margin-bottom: 15px;
}
.help-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
  align-items: start;
}
.help-grid details {
  padding: 23px 0;
}
.turn-list {
  padding-left: 22px;
}
.turn-list li {
  padding: 0 0 15px 7px;
  line-height: 1.65;
}
.catalog-controls {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  padding: 20px;
  background: #e8ebdc;
  border-radius: 9px;
}
.catalog-controls label {
  display: grid;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
}
input,
select {
  width: 100%;
  min-height: 46px;
  background: var(--white);
  border: 1px solid #a6b79f;
  border-radius: 5px;
  padding: 10px;
  color: var(--ink);
}
#catalog-status {
  grid-column: 1/-1;
  font-size: 0.8rem;
  margin: 0;
}
.deck-grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
}
.deck-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
  min-width: 0;
}
.deck-card strong {
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}
.deck-card span {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  margin: 8px 0;
}
.deck-card p {
  font-size: 0.84rem;
  margin: 8px 0 0;
}
.deck-card .roles {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--rust);
}
.downloads {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 0.9rem;
  margin-top: 30px;
}
footer {
  max-width: 1280px;
  margin: auto;
  padding: 45px 36px 85px;
  color: var(--muted);
  font-size: 0.85rem;
}
footer strong {
  font:
    600 1.8rem Fraunces,
    Georgia,
    serif;
  color: var(--ink);
  display: block;
  margin-bottom: 15px;
}
.companion-preview-trigger {
  color: inherit;
}
.text-link {
  font-size: 0.9rem;
}
.print-only {
  display: none;
}
@media (max-width: 1000px) {
  .guide-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero {
    gap: 28px;
  }
  .hero-art {
    min-height: 460px;
  }
  .hero-actions {
    align-items: start;
    flex-direction: column;
    gap: 15px;
  }
  .deck-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 720px) {
  html {
    scroll-padding-top: 20px;
  }
  .topbar {
    padding: 20px;
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
  }
  nav {
    width: 100%;
    gap: 0;
    justify-content: space-between;
    font-size: 0.82rem;
  }
  main {
    padding: 0 20px;
  }
  .hero {
    grid-template-columns: 1fr;
    padding: 38px 0;
    gap: 24px;
  }
  h1 {
    font-size: 3.35rem;
  }
  .hero-art {
    min-height: 360px;
    border-radius: 90px 90px 9px 9px;
    margin-right: 10px;
  }
  .hero-actions {
    flex-direction: row;
    align-items: center;
    gap: 15px;
  }
  .metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .metrics strong {
    font-size: 2rem;
  }
  .metrics span {
    font-size: 0.7rem;
  }
  .section {
    padding: 45px 0;
  }
  .guide-grid,
  .fieldbook,
  .discover-grid,
  .help-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .guide-card {
    padding: 24px;
  }
  .exercise {
    padding: 23px;
  }
  .catalog-controls {
    grid-template-columns: 1fr;
  }
  .deck-grid {
    grid-template-columns: 1fr;
  }
  .section-heading {
    margin-bottom: 24px;
  }
  .help-grid {
    gap: 0;
  }
  .downloads {
    gap: 15px;
  }
  footer {
    padding: 35px 20px 100px;
  }
  .lede {
    font-size: 1rem;
  }
  .hero-copy .eyebrow {
    font-size: 0.65rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    transition: none !important;
    animation: none !important;
  }
}
@media print {
  .topbar,
  .hero-art,
  .hero-actions,
  .exercise,
  .catalog,
  .downloads,
  footer,
  button {
    display: none !important;
  }
  body {
    background: white;
    color: black;
    font-size: 11pt;
  }
  main {
    max-width: none;
    padding: 0;
  }
  .hero {
    display: block;
    padding: 0;
  }
  h1 {
    font-size: 30pt;
  }
  .hero-note,
  .hero .eyebrow {
    display: none;
  }
  .section {
    padding: 18px 0;
    break-inside: avoid;
  }
  .guide-grid,
  .fieldbook,
  .discover-grid,
  .help-grid {
    display: block;
  }
  .guide-card {
    break-inside: avoid;
    margin-bottom: 12px;
  }
  .metrics {
    padding: 10px 0;
  }
  .section h2 {
    font-size: 22pt;
  }
  details:not([open]) {
    display: none;
  }
}

.stamp {
  right: auto;
  left: 24px;
  top: 45px;
}

@media (max-width: 720px) {
  h1 {
    font-size: 2.65rem;
  }
  .hero-art {
    min-height: 320px;
  }
  .hero-note {
    margin-bottom: 0;
  }
}

.english-name { display:block; font-size:.78rem; color:var(--muted,#64756b); margin:.3rem 0 .6rem; overflow-wrap:anywhere; }
.card-open { color:inherit; text-decoration:underline; text-decoration-color:#a88436; text-underline-offset:4px; }
.token-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:22px; list-style:none; padding:0; }
.token-card { max-width:260px; } .token-card img { width:100%; height:auto; border-radius:12px; }
.token-card a { color:inherit; text-decoration:none; } .token-card span { display:block; padding:.5rem 0; }
#card-viewer { width:min(94vw,780px); max-height:94dvh; padding:20px; border:1px solid #b89753; border-radius:16px; background:#f7efda; color:#25372e; }
#card-viewer::backdrop { background:rgba(9,27,22,.85); }
#card-viewer h2 { font-size:1.4rem; margin:1rem 0; } #viewer-image { display:block; width:100%; height:auto; }
#close-viewer { position:sticky; top:0; z-index:2; float:right; background:#183b2c; color:#fff; }
#viewer-faces { display:flex; gap:12px; margin-bottom:15px; } #viewer-faces [aria-pressed=true] { outline:3px solid #ae843b; }
@media (max-width:720px) { #card-viewer { padding:10px; } .token-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media print { #tokens, #card-viewer { display:none; } }
/* Long German names must shrink within narrow grid tracks, including browser zoom. */
.discover-grid > *, .demo-cards > *, .guide-grid > * { min-width:0; overflow-wrap:anywhere; }
#viewer-faces { flex-wrap:wrap; }
#card-viewer h2 { clear:both; overflow-wrap:anywhere; }
#card-viewer { max-width:calc(100vw - 24px); }
/* Card references are inline prose, not full-height exercise controls. */
body button.companion-card-reference { display:inline; min-height:0; margin:0; padding:0; vertical-align:baseline; }
.quiz-controls { flex-wrap:wrap; }
#hand-round { font-size:.85rem; color:var(--muted); }

.deck-card-image { display:block; margin-bottom:16px; border-radius:12px; overflow:hidden; background:#e8ebdc; aspect-ratio:5 / 7; }
.deck-card-image img { display:block; width:100%; height:auto; }
@media print { .deck-card-image { display:none; } }