/* ==========================================================================
   Deutsch für Anfänger — the course's own look.

   The course is a book you work through, not a dashboard you stare at:
   warm paper, ink, one red pencil for "you are here", and a highlighter for
   the word that is being spoken. The German is set in a serif, the chrome
   in a sans. Nothing here needs a server: one stylesheet, no framework.

   Every class the engine and the markup use is kept. The ids the engine
   drives are #pbar, #plabel, #donelabel, #nextlink.
   ========================================================================== */

:root {
  /* paper ------------------------------------------------------------- */
  --paper:      #f6f1e6;
  --paper-2:    #efe8d9;
  --surface:    #fffdf8;
  --surface-2:  #faf5ea;
  --edge:       #e2d9c6;
  --edge-2:     #cec1a7;

  /* ink ---------------------------------------------------------------- */
  --ink:        #221d17;
  --ink-2:      #564d40;
  --ink-3:      #8b8172;

  /* the two course colours --------------------------------------------- */
  --blue:       #2a5c8f;   /* structure: links, table heads, headings */
  --blue-2:     #1c4267;
  --blue-wash:  #e8eff6;
  --red:        #b0402c;   /* the pencil: where you are, what to press */
  --red-2:      #8d2f1e;
  --red-wash:   #fbeeea;
  --green:      #3d7a4f;   /* right */
  --green-wash: #edf5ef;
  --amber:      #ffe08a;   /* the highlighter on the spoken word */
  --amber-ink:  #6b4e00;
  --gold:       #c79a3c;

  --ui: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono: "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

  /* The shop and the books on the shelf: a display serif for titles, a
     condensed grotesque for signage and labels. Both ship with Windows;
     the fallbacks keep the page honest on other machines. */
  --display: "Sitka Banner", "Sitka Display", "Sitka", "Sitka Text", Georgia, serif;
  --sign: "Bahnschrift", "DIN Alternate", "Arial Narrow", var(--ui);

  --radius: 12px;
  --radius-s: 8px;
  --shadow-s: 0 1px 2px rgba(60, 45, 20, .06), 0 3px 10px rgba(60, 45, 20, .05);
  --shadow-m: 0 2px 4px rgba(60, 45, 20, .07), 0 14px 34px rgba(60, 45, 20, .10);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Der Lichtkegel der Lampe reicht ueber den Rand des Regals hinaus. Das ist
     gewollt -- aber die Seite darf deswegen keinen waagerechten Balken
     bekommen. `clip` schneidet ab, ohne einen Scrollbereich zu erzeugen
     (anders als `hidden`, das `position: sticky` kaputtmacht). */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.62;
  /* the faint ruled edge of a workbook page */
  background-image: linear-gradient(90deg, transparent 0 54px, rgba(160, 130, 90, .10) 54px 55px);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--blue-2); }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; }

::selection { background: var(--amber); color: var(--ink); }

/* --------------------------------------------------------------- top bar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: baseline;
  gap: 12px 16px;
  flex-wrap: wrap;
  padding: 14px 28px;
  background: rgba(255, 253, 248, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--edge);
}

.topbar .home {
  font-family: var(--ui);
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.topbar .home:hover { color: var(--red); }

.topbar .stage {
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-wash);
  border: 1px solid #cfdfec;
  border-radius: 999px;
  padding: 3px 11px;
  white-space: nowrap;
}

.topbar h1 {
  margin: 0;
  font-size: 25px;
  line-height: 1.2;
}

.topbar .sub {
  font-family: var(--ui);
  font-size: 14px;
  color: var(--ink-3);
}

.topbar .spacer { flex: 1 1 auto; }

/* Der Kolumnentitel steht auf seiner eigenen Zeile -- wie der Titel eines
   Kapitels im Buch. Darueber laeuft der Kopf: Zurueck, Stufe, Fortschritt. */
.topbar .titleblock {
  flex: 1 0 100%;
  display: flex;
  align-items: baseline;
  gap: 4px 16px;
  flex-wrap: wrap;
  min-width: 0;
}

.topbar .progress {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  font-family: var(--ui);
  font-size: 13px;
  color: var(--ink-2);
}
.topbar .progress .bar {
  display: block;
  width: 110px;
  height: 6px;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--edge);
  overflow: hidden;
}
.topbar .progress .bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--red);
  transition: width .35s var(--ease);
}

/* ------------------------------------------------------------- the rail */
/* The whole course as thirty numbered pages. You always see where you are. */

.rail {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
  padding: 10px 28px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--edge);
  font-family: var(--ui);
}

.rail-label { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.rail-label b { color: var(--ink); font-weight: 600; }
.rail-label a { color: var(--blue); }

/* The page strip: one row, thirty numbers. On a narrow screen it scrolls
   sideways -- and the current page is scrolled into the middle. */
.rail .dots {
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  list-style: none;
  margin: 0;
  padding: 3px 0 5px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.rail .dot { flex: 0 0 auto; }
.rail .dot a,
.rail .dot span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 5px;
  background: var(--surface);
  border: 1px solid var(--edge-2);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1;
  color: var(--ink-3);
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.rail .dot a:hover {
  background: var(--blue-wash);
  border-color: var(--blue);
  color: var(--blue-2);
}
.rail .dot.is-done a {
  background: var(--green-wash);
  border-color: var(--green);
  color: var(--green);
}
.rail .dot.is-here span {
  background: var(--red);
  border-color: var(--red-2);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(176, 64, 44, .16);
}
.rail .dot.is-planned span { background: var(--paper-2); border-style: dashed; }
.rail .dot:focus-within a { outline: 3px solid var(--red); outline-offset: 2px; }
/* where the second volume begins */
.rail .voldiv {
  flex: 0 0 auto;
  width: 2px;
  height: 20px;
  align-self: center;
  margin: 0 7px;
  border-radius: 1px;
  background: var(--edge-2);
}

/* ------------------------------------------------------------------ main */

main {
  max-width: 860px;
  margin: 0 auto;
  padding: 30px 28px 140px;
}

.purpose {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-left: 4px solid var(--red);
  border-radius: var(--radius);
  padding: 20px 24px 22px;
  box-shadow: var(--shadow-s);
  margin-bottom: 34px;
}
.purpose h2 {
  margin: 0 0 8px;
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
}
.purpose .lead { margin: 0 0 12px; font-size: 21px; line-height: 1.45; }
.purpose ul { margin: 0; padding-left: 20px; }
.purpose li { margin: 3px 0; color: var(--ink-2); font-size: 17px; }

section.lesson { margin: 0 0 40px; scroll-margin-top: 120px; }

section.lesson > h2 {
  margin: 0 0 14px;
  font-size: 24px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--edge);
}
section.lesson > h2::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin-top: 8px;
  background: var(--red);
  border-radius: 2px;
}

/* --------------------------------------------------------------- passage */

.passage {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 18px 22px;
  box-shadow: var(--shadow-s);
}

p.tr { margin: 0 0 12px; }
p.tr:last-child { margin-bottom: 0; }
p.tr.de { font-size: 20px; line-height: 1.68; }
p.tr.en { font-size: 16.5px; line-height: 1.58; color: var(--ink-2); }

/* the word that is being spoken right now */
.w { border-radius: 4px; padding: 0 1px; }
.w.on {
  background: var(--amber);
  color: var(--amber-ink);
  box-shadow: 0 1px 0 rgba(107, 78, 0, .35);
}
.w.on.de, .w.on.en { padding: 0 2px; }

/* ------------------------------------------------------------ audio bar */

.audio-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--edge);
  font-family: var(--ui);
}

.audio-bar button {
  font-family: var(--ui);
  font-size: 13px;
  line-height: 1;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--edge-2);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.audio-bar button:hover { border-color: var(--blue); color: var(--blue); }
.audio-bar button.ab-play[data-lang="de"] {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-wash);
}
.audio-bar button.ab-play[aria-pressed="true"] {
  background: var(--blue);
  border-color: var(--blue-2);
  color: #fff;
}
.audio-bar button.ab-play[data-lang="en"][aria-pressed="true"] {
  background: var(--ink-2);
  border-color: var(--ink);
  color: #fff;
}
.audio-bar button.ab-rate { min-width: 46px; }

.audio-bar .ab-note {
  font-size: 12.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.audio-bar .ab-glyph {
  font-size: 15px;
  color: var(--blue);
}

/* ---------------------------------------------------------------- rules */

.rules { display: grid; gap: 14px; }

.rule {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow-s);
}
.rule .head {
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
}
.rule .de { font-size: 19px; }
.rule .en { color: var(--ink-2); font-size: 16.5px; margin-top: 6px; }

/* ---------------------------------------------------------------- table */

.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--surface);
}
.tablewrap table {
  border-collapse: collapse;
  width: 100%;
  font-size: 17px;
}
.tablewrap th {
  text-align: left;
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-wash);
  padding: 10px 14px;
  border-bottom: 1px solid var(--edge-2);
  white-space: nowrap;
}
.tablewrap td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--edge);
  vertical-align: top;
}
.tablewrap tr:last-child td { border-bottom: none; }
.tablewrap td.de { font-size: 18px; }
.tablewrap tr:nth-child(even) td { background: var(--surface-2); }

/* ----------------------------------------------------------- exercises */

.ex {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-s);
  margin-bottom: 16px;
}
.ex[data-done="1"] { border-color: #cfe0d5; }

.qhead { margin-bottom: 12px; }
.qid {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-3);
  background: var(--paper-2);
  border: 1px solid var(--edge);
  border-radius: 5px;
  padding: 1px 7px;
  margin-bottom: 6px;
}
.qtext { display: block; font-size: 19px; line-height: 1.45; }

.opts { display: grid; gap: 8px; }

.opt {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.45;
  padding: 11px 15px;
  border: 1px solid var(--edge-2);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.opt:hover:not(:disabled) { border-color: var(--blue); background: var(--blue-wash); }
.opt:disabled { cursor: default; }
.opt.ok { border-color: var(--green); background: var(--green-wash); }
.opt.no { border-color: var(--red); background: var(--red-wash); }

.row { font-size: 19px; line-height: 2.1; }
.row .ctx { color: var(--ink); }

.ex input[type="text"] {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  background: var(--surface);
  border: none;
  border-bottom: 2px solid var(--edge-2);
  padding: 2px 6px;
  min-width: 130px;
  border-radius: 4px 4px 0 0;
}
.ex input[type="text"]:focus {
  outline: none;
  background: #fff;
  border-bottom-color: var(--blue);
  box-shadow: 0 2px 0 rgba(42, 92, 143, .18);
}
.ex input[type="text"].bad { border-bottom-color: var(--red); background: var(--red-wash); }
.ex input[type="text"].ok { border-bottom-color: var(--green); background: var(--green-wash); }

.acts { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

.btn {
  font-family: var(--ui);
  font-size: 14px;
  padding: 9px 17px;
  border-radius: 999px;
  border: 1px solid var(--edge-2);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.btn:hover { border-color: var(--ink-2); color: var(--ink); }
.btn.primary {
  background: var(--red);
  border-color: var(--red-2);
  color: #fff;
}
.btn.primary:hover { background: var(--red-2); border-color: var(--red-2); color: #fff; }

.fb {
  margin-top: 12px;
  padding: 0;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.fb.good {
  background: var(--green-wash);
  border-left: 3px solid var(--green);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  padding: 11px 14px;
  color: #24402e;
}
.fb.bad {
  background: var(--red-wash);
  border-left: 3px solid var(--red);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  padding: 11px 14px;
  color: #5d2115;
}
.fb strong { color: inherit; }

/* ---------------------------------------------------------------- match */

.match {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
.match .left, .match .right { display: grid; gap: 8px; align-content: start; }

.chip {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--serif);
  font-size: 17.5px;
  line-height: 1.4;
  padding: 10px 14px;
  border: 1px solid var(--edge-2);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.chip:hover:not(:disabled) { border-color: var(--blue); background: var(--blue-wash); }
.chip.sel { border-color: var(--red); background: var(--red-wash); }
.chip.ok { border-color: var(--green); background: var(--green-wash); }
.chip.no { border-color: var(--red); background: var(--red-wash); }

@media (max-width: 640px) {
  .match { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------- vocab */

.vocab { background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius); padding: 18px 22px; }
.vocab .acts { margin-top: 12px; }

/* -------------------------------------------------------------- write */

.write {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 18px 22px;
  box-shadow: var(--shadow-s);
}
.write .prompt { margin: 0 0 8px; font-size: 19px; }
.write .hint { margin: 0 0 14px; font-size: 16.5px; color: var(--ink-2); }
.write textarea {
  width: 100%;
  min-height: 150px;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--edge-2);
  border-radius: var(--radius-s);
  padding: 12px 14px;
  resize: vertical;
}
.write textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(42, 92, 143, .12);
}
.write .model {
  display: none;
  margin-top: 14px;
  padding: 12px 16px;
  background: var(--green-wash);
  border-left: 3px solid var(--green);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.write .model.show { display: block; }
.write .saved { font-family: var(--ui); font-size: 12.5px; color: var(--ink-3); }

/* -------------------------------------------------------------- links */

ul.links { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
ul.links li {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 14px 18px;
}
ul.links a { font-weight: 600; }
ul.links .why { font-family: var(--ui); font-size: 14.5px; color: var(--ink-2); margin-top: 3px; }

/* --------------------------------------------------------------- wrap */

.wrap {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-top: 3px solid var(--green);
  border-radius: var(--radius);
  padding: 18px 22px;
}
.wrap ol { margin: 0; padding-left: 22px; }
.wrap li { margin: 7px 0; }
.wrap .de { font-size: 18.5px; }
.wrap .en { color: var(--ink-3); font-size: 16px; }
.wrap .nextline { margin: 16px 0 0; font-size: 18px; color: var(--ink); }
.wrap .wrapnote { margin: 8px 0 0; font-family: var(--ui); font-size: 13.5px; color: var(--ink-3); }

/* ------------------------------------------------------------ next bar */
/* The foot of the page: back, the page number, on. Always in sight.       */

.nextbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  background: rgba(255, 253, 248, .96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--edge);
}
.nextbar .inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 11px 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--ui);
}
.nextbar .sub { font-size: 13px; color: var(--ink-3); }
.nextbar .done { font-size: 13px; color: var(--green); }
.nextbar .spacer { flex: 1 1 auto; }

/* Die Seitenzahl in der Mitte: das Blatt, auf dem man gerade ist. */
.nextbar .centre {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}
.nextbar .folio-page {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--ink-3);
}
.nextbar .folio-page b { color: var(--ink); font-weight: 700; }

.nextbar .prev {
  font-size: 13.5px;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.nextbar .prev:hover { color: var(--red); }

/* Der "Weiter"-Knopf ist nie tot: er ist nur noch grau, solange die Lektion
   nicht fertig ist. Ein Knopf, der nicht reagiert, wuerde den Lernenden
   raten lassen, was er tun muss. */
.nextbar .next {
  font-size: 14px;
  text-decoration: none;
  color: var(--ink-2);
  background: var(--paper-2);
  border: 1px solid var(--edge-2);
  border-radius: 999px;
  padding: 8px 17px;
  white-space: nowrap;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.nextbar .next:hover { background: var(--red-wash); border-color: var(--red); color: var(--red); }
.nextbar .next.ready {
  background: var(--red);
  border-color: var(--red-2);
  color: #fff;
}
.nextbar .next.ready:hover { background: var(--red-2); color: #fff; }

/* --------------------------------------------------------------- foot */

.foot {
  max-width: 860px;
  margin: 0 auto;
  padding: 26px 28px 96px;
  font-family: var(--ui);
  font-size: 13px;
  color: var(--ink-3);
  border-top: 1px solid var(--edge);
}
.foot .folio {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--edge);
}
.foot .folio-book {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink-2);
}
.foot .folio-hint { color: var(--ink-3); }
.foot .folio-hint kbd {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--edge-2);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 5px;
}
.foot p { margin: 0 0 8px; }
.foot .wb { margin: 0; }
.foot .wb a {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--edge-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--blue);
  text-decoration: none;
  font-size: 13.5px;
}
.foot .wb a:hover { border-color: var(--blue); background: var(--blue-wash); }

/* ---------------------------------------------------------- next page */
/* Das Ende der Lektion ist eine Einladung: die naechste Seite, benannt.   */

.nextpage {
  margin: 46px 0 0;
  padding-top: 26px;
  border-top: 3px double var(--edge-2);
  display: grid;
  gap: 14px;
}

.np {
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius);
}

.np--prev {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  justify-self: start;
  padding: 9px 16px;
  border: 1px dashed var(--edge-2);
  background: transparent;
  font-family: var(--ui);
  font-size: 14px;
  color: var(--ink-2);
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.np--prev .np-arrow { color: var(--blue); font-size: 16px; }
.np--prev .np-label {
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.np--prev .np-title { font-size: 14px; color: var(--ink-2); }
.np--prev:hover {
  border-color: var(--blue);
  background: var(--blue-wash);
  color: var(--blue-2);
}

.np--next,
.np--end {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label arrow" "title arrow" "sub arrow";
  align-content: center;
  gap: 3px 18px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--edge);
  box-shadow: var(--shadow-s);
  transition: background .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.np--next .np-label,
.np--end .np-label {
  grid-area: label;
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
}
.np--next .np-title,
.np--end .np-title { grid-area: title; font-size: 22px; color: var(--ink); line-height: 1.3; }
.np--next .np-sub,
.np--end .np-sub { grid-area: sub; font-family: var(--ui); font-size: 14px; color: var(--ink-3); }
.np--next .np-arrow,
.np--end .np-arrow { grid-area: arrow; font-size: 28px; color: var(--red); line-height: 1; }
.np--next:hover {
  border-color: var(--red);
  background: var(--red-wash);
  box-shadow: var(--shadow-m);
}
.np--end .np-label { color: var(--blue); }
.np--end .np-arrow { color: var(--blue); }
.np--end:hover { border-color: var(--blue); background: var(--blue-wash); }

/* =============================================================== the room */
/* The home page is the publisher's shop: a dark wall, one lamp, a walnut   */
/* shelf in a niche, three cloth-bound volumes standing in the light. It has */
/* to look like a place -- not like a dashboard with cards on it.             */

.coverpage {
  --chalk:      #f0e4cd;
  --chalk-2:    #c8b492;
  --brass:      #cfae72;
  --brass-dim:  rgba(207, 174, 114, .42);
  min-height: 100vh;
  font-family: var(--ui);
  color: var(--chalk);
  /* Kein "background-attachment: fixed" -- dann propagiert die Wand in die
     Canvas und deckt nur das Fenster, nicht die ganze Seite. */
  background:
    radial-gradient(120% 70% at 16% -6%, rgba(255, 226, 170, .30), transparent 58%),
    radial-gradient(80% 52% at 86% 4%, rgba(255, 212, 150, .08), transparent 70%),
    radial-gradient(76% 46% at 94% 76%, rgba(96, 116, 132, .16), transparent 72%),
    radial-gradient(150% 80% at 50% 116%, rgba(0, 0, 0, .60), transparent 62%),
    linear-gradient(180deg, #35261a 0%, #271b10 44%, #1a1109 100%);
}
/* the plaster of the wall */
.coverpage::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .085;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

/* the sign above the shelf ---------------------------------------------- */

.coverpage .masthead {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px 18px;
  flex-wrap: wrap;
  max-width: 1180px;
  margin: 0 auto;
  padding: 30px 28px 14px;
  border-bottom: none;
}
.coverpage .masthead .brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 0 auto;
  text-decoration: none;
  color: inherit;
}
.coverpage .masthead .menu { margin-left: auto; }
.brand-mark {
  font-family: var(--sign);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #f6ead1;
  line-height: 1;
}
.brand-tld { color: var(--brass); }
.coverpage .masthead .brandsub {
  font-family: var(--sign);
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(240, 228, 205, .52);
}
.coverpage .masthead .brand:hover .brand-mark { color: #fff4dd; }

.shelfpage {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px 110px;
}
.room { padding: 30px 0 0; text-align: center; }
.room-kicker {
  font-family: var(--sign);
  font-size: 12px;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: rgba(240, 228, 205, .5);
  margin: 0 0 20px;
}
.room-title {
  margin: 0 auto;
  font-family: var(--display);
  font-size: clamp(32px, 5.2vw, 54px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.018em;
  max-width: 17ch;
  text-wrap: balance;
  color: #f7edd9;
}
.room-lede {
  margin: 20px auto 0;
  max-width: 56ch;
  font-size: 16.5px;
  line-height: 1.62;
  color: rgba(240, 228, 205, .70);
}

/* the niche --------------------------------------------------------------- */

.case {
  position: relative;
  margin: 58px auto 0;
  max-width: 1010px;
  padding: 0 16px;
  isolation: isolate;
  /* Der Lichtkegel der Lampe reicht ueber den Rand des Regals hinaus -- das
     sieht gut aus, gibt aber der Seite einen waagerechten Balken. `clip`
     schneidet ihn ab, ohne einen Scrollbereich zu erzeugen; die Pflanze oben
     auf dem Regal bleibt sichtbar, weil nur die Waagerechte abgeschnitten
     wird. */
  overflow-x: clip;
}
/* the wooden frame around the niche */
.case::before {
  content: "";
  position: absolute;
  inset: -13px 2px -13px;
  z-index: 0;
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255, 226, 178, .16), rgba(0, 0, 0, .30) 58%, rgba(0, 0, 0, .46)),
    repeating-linear-gradient(90deg, rgba(20, 10, 2, .16) 0 2px, transparent 2px 11px),
    linear-gradient(180deg, #6b4a2b, #49311c 60%, #37230f);
  box-shadow:
    0 34px 52px -26px rgba(0, 0, 0, .92),
    inset 0 1px 0 rgba(255, 226, 178, .24);
}
.case-back {
  position: absolute;
  inset: 0 16px;
  z-index: 1;
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .30) 20%,
                            rgba(0, 0, 0, .04) 56%, rgba(0, 0, 0, .18) 100%),
    radial-gradient(70% 40% at 42% 86%, rgba(255, 222, 168, .10), transparent 70%),
    linear-gradient(180deg, #45301f, #312114 68%, #281a10);
  box-shadow:
    inset 0 34px 52px -24px rgba(0, 0, 0, .95),
    inset 0 0 0 1px rgba(0, 0, 0, .55),
    inset 20px 0 40px -30px rgba(0, 0, 0, .9),
    inset -20px 0 40px -30px rgba(0, 0, 0, .9);
}
/* the lamp, from the upper left: a pool of light, not a cut-out wedge */
.case-light {
  position: absolute;
  inset: -26px -8% 0 -8%;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(58% 82% at 22% 4%, rgba(255, 232, 182, .22), transparent 62%),
    linear-gradient(158deg, rgba(255, 224, 170, .10) 0%, transparent 42%);
}
.case-inner {
  position: relative;
  z-index: 3;
  padding-top: 30px;
}
/* one row per edition: english, french, spanish ------------------------- */

.shelfrow {
  position: relative;
  margin: 0 0 36px;
}
.shelfrow-books {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(10px, 2.2vw, 30px);
  /* Wie breit ein Ding auf dem Brett sein darf. Es waechst mit dem Fenster,
     aber nur so weit, bis es den Baenden in die Fusslinie kommt. */
  --prop-w: clamp(34px, 7.4vw, 116px);
}

/* the things that stand on the boards ------------------------------------- */

/* Neben den Baenden ist auf jeder Reihe Platz. Der Platz ist nicht leer --
   er ist der Ort, an dem der Verlag die Dinge hinstellt, die nicht in ein
   Buch passen: ein Stapel Paperbacks, ein Gefaess mit Bleistiften, ein
   kleines Foto. Die Baender bleiben in der Mitte; die Dinge stehen an den
   Enden, auf dem Brett selbst. */
.prop {
  position: absolute;
  z-index: 4;
  bottom: 5px;
  width: var(--prop-w);
  pointer-events: none;
}
.prop--left { left: 14px; }
.prop--right { right: 14px; }

/* a stack of paperbacks lying flat: cloth on the left, the page edge on the
   right, three of them a little out of line */
.prop--stack { height: 44px; }
.prop--stack i {
  position: absolute;
  left: 0;
  height: 14px;
  border-radius: 2px 3px 3px 2px;
  background:
    linear-gradient(180deg, rgba(255, 236, 200, .17), rgba(0, 0, 0, .24)),
    linear-gradient(90deg,
      var(--cloth) 0 54%,
      var(--cloth-dark) 54% 59%,
      var(--paper-edge) 59% 89%,
      var(--cloth-dark) 89% 100%);
  box-shadow:
    0 7px 10px -6px rgba(0, 0, 0, .9),
    inset 0 1px 0 rgba(255, 226, 178, .16);
}
.prop--stack i:nth-child(1) { bottom: 0; width: 94%; }
.prop--stack i:nth-child(2) { bottom: 16px; width: 100%; left: 3%; }
.prop--stack i:nth-child(3) { bottom: 32px; width: 86%; left: 7%; }

/* the publisher's jar: glazed stoneware with a brass lid */
.prop--jar { height: 64px; }
.prop--jar .body {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 62%;
  height: 48px;
  transform: translateX(-50%);
  border-radius: 6px 6px 12px 12px / 5px 5px 10px 10px;
  background:
    linear-gradient(100deg, #5d564a 0%, #9a8f7a 32%, #c7bca3 52%, #8c8270 78%, #585044 100%);
  box-shadow:
    0 9px 13px -7px rgba(0, 0, 0, .9),
    inset 0 1px 0 rgba(255, 240, 214, .3);
}
.prop--jar .lid {
  position: absolute;
  left: 50%;
  bottom: 44px;
  width: 74%;
  height: 12px;
  transform: translateX(-50%);
  border-radius: 3px 3px 2px 2px;
  background: linear-gradient(180deg, #d8c69d, #9a845b 68%, #6d5a3a);
  box-shadow: 0 4px 6px -3px rgba(0, 0, 0, .8);
}
.prop--jar .lid::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -6px;
  width: 14px;
  height: 8px;
  transform: translateX(-50%);
  border-radius: 50% 50% 40% 40%;
  background: linear-gradient(180deg, #e6d3a8, #a2855a);
}

/* the cloth of the stack belongs to the row -- it is the same binding as the
   books next to it, only lying flat. */
.shelfrow--en { --cloth: #2f4f85; --cloth-dark: #1a2f57; --paper-edge: #cdbf9d; }
.shelfrow--fr { --cloth: #8a2f4c; --cloth-dark: #551a2e; --paper-edge: #d3c3a0; }
.shelfrow--es { --cloth: #4d6330; --cloth-dark: #2d3c1a; --paper-edge: #d2c6a4; }

/* the hanging shop sign -------------------------------------------------- */

.sign {
  position: relative;
  width: fit-content;
  margin: 0 auto 30px;
  padding: 11px 34px 13px;
  background: linear-gradient(180deg, #5b3c22, #402916);
  border: 1px solid rgba(207, 174, 114, .34);
  border-radius: 3px;
  box-shadow:
    0 18px 30px -14px rgba(0, 0, 0, .9),
    inset 0 1px 0 rgba(255, 226, 178, .22);
  transform: rotate(-.5deg);
}
/* the two wires it hangs on */
.sign::before,
.sign::after {
  content: "";
  position: absolute;
  top: -30px;
  width: 1.5px;
  height: 32px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(207, 174, 114, .45));
}
.sign::before { left: 22%; }
.sign::after { right: 22%; }
.sign b {
  display: block;
  font-family: var(--sign);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--brass);
  text-align: center;
}
.sign span {
  display: block;
  font-family: var(--sign);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(240, 228, 205, .45);
  text-align: center;
  margin-top: 3px;
}

/* a picture on the wall, beside the case --------------------------------- */

.frame {
  position: absolute;
  z-index: 1;
  top: -104px;
  left: 26px;
  width: 112px;
  padding: 8px 8px 28px;
  background: linear-gradient(180deg, #5a3a1f, #3a2413);
  border: 1px solid rgba(207, 174, 114, .28);
  box-shadow:
    0 16px 26px -14px rgba(0, 0, 0, .9),
    inset 0 1px 0 rgba(255, 226, 178, .2);
  transform: rotate(-2.4deg);
}
.frame .pic {
  height: 104px;
  overflow: hidden;
  background: #241508;
}
.frame .pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.frame em {
  display: block;
  text-align: center;
  font-family: var(--sign);
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(240, 228, 205, .5);
  margin-top: 8px;
}

/* the plant on top of the case ------------------------------------------- */

.plant {
  position: absolute;
  z-index: 4;
  top: -146px;
  right: 34px;
  width: 158px;
  filter: drop-shadow(0 18px 16px rgba(0, 0, 0, .62));
}

/* a small framed photo leaning on the first board ------------------------ */

.vase {
  position: absolute;
  z-index: 4;
  bottom: 5px;
  left: 14px;
  width: var(--prop-w, 88px);
  height: calc(var(--prop-w, 88px) * .8);
  object-fit: cover;
  border: max(3px, calc(var(--prop-w, 88px) * .07)) solid #452b16;
  border-bottom-width: max(6px, calc(var(--prop-w, 88px) * .15));
  background: #241508;
  transform: rotate(-2deg);
  box-shadow:
    0 16px 26px -10px rgba(0, 0, 0, .8),
    inset 0 0 0 1px rgba(0, 0, 0, .5);
}

/* the books --------------------------------------------------------------- */

.book {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  transform: translateY(0);
  filter: drop-shadow(0 22px 18px rgba(0, 0, 0, .55)) drop-shadow(0 4px 4px rgba(0, 0, 0, .45));
  transition: transform .32s var(--ease), filter .32s var(--ease);
}
.book--a1 { width: 172px; }
.book--a2 { width: 158px; }
.book--workshop { width: 148px; }
.book--a1 .cover { height: 242px; }
.book--a2 .cover { height: 228px; }
.book--workshop .cover { height: 222px; }

.cover {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2px 7px 7px 2px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .38);
}
.cover-cloth {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
/* The cloth belongs to the row, not to the volume: the three books of one
   language are a series in one binding. The row colour says which language. */
.shelfrow--en .cover-cloth { background-image: url("../img/cover-a1.jpg"); }
.shelfrow--fr .cover-cloth { background-image: url("../img/cover-fr.jpg"); }
.shelfrow--es .cover-cloth { background-image: url("../img/cover-es.jpg"); }
/* the lamp falls on the upper left of the cloth; the lower right goes dark */
.cover-cloth::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(110% 84% at 6% -8%, rgba(255, 238, 202, .12), transparent 54%),
    linear-gradient(152deg, transparent 34%, rgba(0, 0, 0, .46) 100%);
}
/* the spine: the board turns a little toward the reader */
.cover-spine {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 13px;
  z-index: 2;
  background: linear-gradient(90deg, rgba(0, 0, 0, .60), rgba(255, 255, 255, .13) 56%, rgba(0, 0, 0, .32));
  border-radius: 2px 0 0 2px;
  box-shadow: 3px 0 7px -3px rgba(0, 0, 0, .55);
}
.cover-face {
  position: absolute;
  left: 13px; right: 0; top: 0; bottom: 40px;
  padding: 16px 13px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1;
}
/* a scrim so the type always reads, even where the lamp falls on the cloth */
.cover-face::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .40), rgba(0, 0, 0, .10) 32%, transparent 58%);
  pointer-events: none;
}
/* the blind-stamped frame of a cloth binding */
.cover-face::after {
  content: "";
  position: absolute;
  inset: 8px 7px 7px 7px;
  border: 1px solid rgba(255, 226, 170, .26);
  border-radius: 2px;
  pointer-events: none;
}
.cover-level {
  font-family: var(--sign);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255, 244, 222, .84);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
/* The band under the level: it tells the three volumes of a row apart while
   the cloth stays the same. Brass for the first, terracotta for the second,
   olive for the workshop. */
.book--a1 .cover-level::after,
.book--a2 .cover-level::after,
.book--workshop .cover-level::after {
  content: "";
  display: block;
  width: 30px;
  height: 2px;
  margin-top: 7px;
}
.book--a1 .cover-level::after { background: #e3c489; }
.book--a2 .cover-level::after { background: #e08a5f; }
.book--workshop .cover-level::after { background: #a9bd7d; }
.cover-title {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.012em;
  color: #f8eed9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 16px rgba(0, 0, 0, .3);
}
.cover-sub {
  font-size: 10px;
  line-height: 1.4;
  color: rgba(248, 238, 217, .74);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.cover-foot {
  position: absolute;
  left: 13px; right: 0; bottom: 0;
  z-index: 1;
  height: 40px;
  padding: 0 13px 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 2px;
}
.cover-count {
  font-family: var(--sign);
  font-size: 8.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 244, 222, .8);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
.cover-mark {
  font-family: var(--sign);
  font-size: 8.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
/* The workshop sits in the same cloth as its row, but it is the fat one:
   its title needs a little more room. */
.book--workshop .cover-title { font-size: 15px; line-height: 1.16; }
.book--workshop .cover-face { gap: 7px; padding-top: 13px; }
.book--workshop .cover-face::after { border-color: rgba(255, 226, 170, .30); }

.book:hover { transform: translateY(-13px); }
.book:focus-visible { outline: none; }
.book:focus-visible .cover { outline: 3px solid var(--brass); outline-offset: 6px; }
/* the books stand as they were put down, not as a printer set them */
.book--a1 { transform: rotate(-.22deg); transform-origin: 50% 100%; }
.book--a2 { transform: rotate(.14deg); transform-origin: 50% 100%; }
.book--workshop { transform: rotate(-.34deg); transform-origin: 50% 100%; }
.book--a1:hover, .book--a2:hover, .book--workshop:hover {
  transform: translateY(-13px) rotate(0deg);
}

/* the shelf board -------------------------------------------------------- */

.plank {
  position: relative;
  z-index: 1;
  height: 30px;
  margin: -5px -26px 0;
  border-radius: 2px 2px 4px 4px;
  background:
    linear-gradient(180deg,
      rgba(255, 226, 178, .22) 0 3px, rgba(0, 0, 0, .12) 24%,
      rgba(0, 0, 0, .42) 82%, rgba(0, 0, 0, .58) 100%),
    repeating-linear-gradient(90deg,
      rgba(24, 12, 4, .17) 0 2px, transparent 2px 9px,
      rgba(255, 226, 178, .05) 9px 11px, transparent 11px 19px),
    linear-gradient(180deg, #6d4728, #4c301a 55%, #372210);
  box-shadow:
    0 28px 36px -18px rgba(0, 0, 0, .82),
    inset 0 1px 0 rgba(255, 226, 178, .26),
    inset 0 -2px 3px rgba(0, 0, 0, .45);
}
/* the shadow the books cast on the board */
.plank::before {
  content: "";
  position: absolute;
  left: 10%; right: 10%; top: -11px;
  height: 13px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .34));
  pointer-events: none;
}

/* the brass label on the shelf edge -------------------------------------- */

.shelflabel {
  position: relative;
  z-index: 3;
  width: fit-content;
  max-width: 100%;
  margin: 16px auto 0;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 9px 24px;
  background: linear-gradient(180deg, #6f5b3a, #4b3c25);
  border: 1px solid rgba(207, 174, 114, .4);
  border-radius: 2px;
  box-shadow: 0 16px 26px -12px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 226, 160, .22);
  font-family: var(--sign);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #ecd9b2;
}
.shelflabel span { white-space: nowrap; }
.shelflabel span + span::before { content: "·"; color: var(--brass-dim); margin-right: 18px; }

/* the brass plate under each row: it names the language ------------------ */

.plate {
  position: relative;
  z-index: 3;
  width: fit-content;
  margin: 12px auto 0;
  padding: 6px 20px;
  background: linear-gradient(180deg, #6f5b3a, #4b3c25);
  border: 1px solid rgba(207, 174, 114, .4);
  border-radius: 2px;
  box-shadow:
    0 12px 22px -12px rgba(0, 0, 0, .85),
    inset 0 1px 0 rgba(255, 226, 160, .22);
}
.plate a {
  font-family: var(--sign);
  font-size: 10.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #ecd9b2;
  text-decoration: none;
  display: block;
}
.plate a:hover { color: #fff3d8; }

.cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 46px 0 0;
}
.coverpage .cta .start {
  display: inline-block;
  font-family: var(--sign);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #241708;
  background: linear-gradient(180deg, #edd7a4, #cfae72);
  border: 1px solid #b8955e;
  border-radius: 2px;
  padding: 15px 30px;
  text-decoration: none;
  box-shadow: 0 18px 28px -14px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.coverpage .cta .start:hover {
  color: #241708;
  transform: translateY(-2px);
  box-shadow: 0 24px 34px -14px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.coverpage .cta .continue {
  display: inline-block;
  font-family: var(--sign);
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(240, 228, 205, .82);
  background: transparent;
  border: 1px solid rgba(240, 228, 205, .3);
  border-radius: 2px;
  padding: 14px 24px;
  text-decoration: none;
}
.coverpage .cta .continue:hover { border-color: var(--brass); color: #f7ecd6; }
.cta .continue[hidden] { display: none; }

/* the colophon under the shelf */
.room-foot {
  margin: 72px 0 0;
  font-family: var(--sign);
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(240, 228, 205, .38);
}

/* The name of the publisher is his address: everywhere it stands, it is a
   link to his site. On the dark wall it keeps the brass of the sign, on paper
   it stays in the colour of the text and is marked by an underline. */
.publink {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(207, 174, 114, .65);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.publink:hover { color: var(--gold); }
.coverpage .publink:hover { color: var(--brass); }

/* ================================================================= the menu */
/* A drawer from the right. Without JavaScript it still opens -- <details>    */
/* knows how -- so nothing in it is ever unreachable.                         */

.menu { position: relative; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ui);
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--edge-2);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  list-style: none;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.menu-toggle::-webkit-details-marker { display: none; }
.menu-toggle:hover { border-color: var(--blue); color: var(--blue); }
.menu[open] .menu-toggle { background: var(--ink); border-color: var(--ink); color: var(--surface); }

.menu-toggle .burger {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 2px;
  background: currentColor;
}
.menu-toggle .burger::before,
.menu-toggle .burger::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
}
.menu-toggle .burger::before { top: -5px; }
.menu-toggle .burger::after { top: 5px; }

.menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(34, 29, 23, .40);
  animation: menu-fade .25s var(--ease);
}
/* Eine geschlossene Schublade ist nicht da. Ohne diese Regel bleibt ihre Box
   rechts neben dem Fenster stehen -- und die Seite bekommt einen waagerechten
   Balken, den niemand braucht. */
.menu:not([open]) .menu-panel { display: none; }
.menu-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 60;
  width: min(460px, 100%);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px 26px 70px;
  /* Die Schublade ist Papier -- auch auf der dunklen Startseite. */
  color: var(--ink);
  background: var(--surface);
  border-left: 1px solid var(--edge);
  box-shadow: -24px 0 60px rgba(60, 45, 20, .18);
  animation: menu-in .28s var(--ease);
}
@keyframes menu-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes menu-fade { from { opacity: 0; } to { opacity: 1; } }
body.menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .menu-panel, .menu-scrim { animation: none; }
}

.menu-sec { padding: 20px 0; border-top: 1px solid var(--edge); }
.menu-sec:first-of-type { border-top: none; padding-top: 2px; }

/* Die Schublade verdeckt den Knopf, der sie geoeffnet hat -- also braucht sie
   einen eigenen zum Schliessen. */
.menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
}
.menu-h--top { margin: 0; color: var(--ink-3); letter-spacing: .14em; }
.menu-close {
  font-family: var(--ui);
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--edge-2);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.menu-close:hover { border-color: var(--red); color: var(--red); }
.menu-close:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.menu-h {
  margin: 0 0 12px;
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue);
}
.menu-lede { margin: 0 0 14px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.menufacts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  font-family: var(--ui);
  font-size: 13.5px;
  color: var(--ink-2);
}
.menufacts li { position: relative; padding-left: 16px; }
.menufacts li::before {
  content: "·";
  position: absolute;
  left: 4px;
  color: var(--red);
  font-weight: 700;
}
.menu-foot {
  margin: 22px 0 0;
  font-family: var(--ui);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-3);
}
/* the publisher's own site, named in the section about him */
.menu-aboutlink {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
}
.menu-aboutlink .publink { text-decoration-color: rgba(42, 92, 143, .45); }
.menu-aboutlink .publink:hover { color: var(--blue); }
.menu-panel .dl {
  display: inline-block;
  font-family: var(--ui);
  font-size: 14px;
  color: var(--blue);
  background: var(--surface);
  border: 1px solid var(--edge-2);
  border-radius: 999px;
  padding: 10px 20px;
  text-decoration: none;
}
.menu-panel .dl:hover { border-color: var(--blue); background: var(--blue-wash); }
.menu-panel .dl small { display: block; color: var(--ink-3); font-size: 12px; margin-top: 1px; }

/* the method, the route and the gifts -- all of them live in the drawer */

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  background: var(--edge);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  overflow: hidden;
}
.steps li {
  background: var(--surface);
  padding: 13px 16px 14px;
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--red);
  margin-bottom: 5px;
}
.steps .st { display: block; font-family: var(--ui); font-weight: 600; font-size: 14.5px; }
.steps .sd { display: block; font-family: var(--ui); font-size: 13px; color: var(--ink-3); margin-top: 2px; }

/* the route -- the course as a list of lessons, not a grid of covers */
.routelead { font-family: var(--ui); font-size: 14px; color: var(--ink-3); margin: 0 0 18px; }

.stageblock { margin: 0 0 26px; }
.stageblock h3 {
  font-size: 19px;
  margin: 0 0 2px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.stageblock h3 .stagenote { font-family: var(--ui); font-size: 13px; color: var(--ink-3); font-weight: 400; }

.rlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--edge); }
.rlist li { border-bottom: 1px solid var(--edge); }
.rlist a,
.rlist .rrow {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  grid-template-areas: "num title meta" "num sub sub";
  align-items: baseline;
  column-gap: 12px;
  padding: 10px 6px 11px;
  text-decoration: none;
  color: inherit;
  transition: background .15s var(--ease);
}
.rlist a:hover { background: var(--blue-wash); color: inherit; }
.rlist .rnum {
  grid-area: num;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-3);
}
.rlist .rtitle { grid-area: title; font-size: 17px; }
.rlist .rsub { grid-area: sub; font-family: var(--ui); font-size: 13.5px; color: var(--ink-3); }
.rlist .rmeta {
  grid-area: meta;
  font-family: var(--ui);
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
}
.rlist .rstate {
  grid-area: meta;
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rlist li.is-planned { color: var(--ink-3); }
.rlist li.is-planned .rtitle { font-style: italic; }
.rlist li.is-ready .rtitle { color: var(--ink); }
.rlist li.is-ready .rnum { color: var(--red); }

/* what you get */
.giftgrid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.gift {
  background: var(--surface-2);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.gift h3 { margin: 0 0 6px; font-size: 18px; }
.gift p { margin: 0; font-family: var(--ui); font-size: 14px; color: var(--ink-2); line-height: 1.55; }

/* ============================================================ a book page */
/* When a book is opened, the first page is its table of contents. The title */
/* stands above it, like the title page of a real book -- and the accent    */
/* colour is the colour of that book's binding.                             */

.bookpage--a1 { --accent: #2f5f8e; --accent-wash: #e7eff6; }
.bookpage--a2 { --accent: #8d3030; --accent-wash: #f8ebeb; }
.bookpage--workshop { --accent: #7a5a22; --accent-wash: #f4ecda; }

.bhead {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 28px;
  background: rgba(255, 253, 248, .95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--edge);
  font-family: var(--ui);
}
.bhead .bhome {
  font-family: var(--sign);
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
}
.bhead .bhome:hover { color: var(--accent); }
.bhead .spacer { flex: 1 1 auto; }

.bookmain {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 28px 100px;
}
.bcover {
  padding: 52px 0 30px;
  margin-bottom: 38px;
  border-bottom: 3px double var(--edge-2);
}
.bkicker {
  font-family: var(--sign);
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}
.btitle {
  margin: 0;
  font-size: clamp(32px, 5vw, 46px);
  line-height: 1.1;
  letter-spacing: -.015em;
}
.bsub {
  margin: 14px 0 0;
  font-family: var(--ui);
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink-2);
}
.bmeta {
  margin: 10px 0 0;
  font-family: var(--sign);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.blead {
  margin: 22px 0 0;
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 62ch;
}
.dlbig {
  display: inline-block;
  margin-top: 26px;
  font-family: var(--ui);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: 1px solid rgba(0, 0, 0, .16);
  border-radius: 999px;
  padding: 13px 26px;
  text-decoration: none;
  box-shadow: var(--shadow-s);
}
.dlbig:hover { color: #fff; filter: brightness(1.08); }
.dlbig small {
  display: block;
  font-weight: 400;
  font-size: 12px;
  opacity: .82;
  margin-top: 2px;
}

.toc-h {
  font-family: var(--sign);
  font-size: 12.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 30px;
}
.tocpart { margin: 0 0 42px; }
.toch {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--accent);
  font-size: 22px;
}
.toch .tocnote {
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-3);
}

/* the contents: a leader between the chapter and its length */
.bookpage .rlist { border-top: none; }
.bookpage .rlist a,
.bookpage .rlist .rrow {
  grid-template-columns: 40px 1fr 1fr auto;
  grid-template-areas: "num title lead meta" "num sub sub sub";
  column-gap: 14px;
  padding: 11px 6px 12px;
}
.bookpage .rlist .rtitle { font-size: 19px; grid-area: title; }
.bookpage .rlist .rlead {
  grid-area: lead;
  align-self: end;
  margin-bottom: .5em;
  border-bottom: 1px dotted var(--edge-2);
}
.bookpage .rlist .rmeta { grid-area: meta; }
.bookpage .rlist .rsub { grid-area: sub; }
.bookpage .rlist a:hover { background: var(--accent-wash); }
.bookpage .rlist li.is-ready .rnum { color: var(--accent); }

.bfoot {
  border-top: 1px solid var(--edge);
  padding: 26px 28px 60px;
  text-align: center;
}
.bfoot p {
  margin: 0;
  font-family: var(--sign);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --------------------------------------------------------------- print */

@media print {
  body { background: #fff; font-size: 12pt; }
  .topbar, .rail, .nextbar, .audio-bar, .acts, .foot .wb, .rail,
  .foot .folio-hint,
  .menu, .book, .plank, .shelflabel, .cta,
  .case, .room-foot, .room-kicker, .room-lede { display: none !important; }
  main { max-width: none; padding: 0; }
  .passage, .ex, .rule, .wrap, .write, .vocab, .purpose, ul.links li { box-shadow: none; break-inside: avoid; }
  .w.on { background: none; box-shadow: none; }
  .nextpage { break-inside: avoid; }
  .np--next { box-shadow: none; }
}

/* -------------------------------------------------------------- mobile */

/* Auf einem schmalen Bildschirm passen drei Buender nicht nebeneinander.
   Sie werden kleiner -- das Regal bleibt ein Regal, nur kompakter. */
@media (max-width: 1000px) {
  .book--a1 { width: 144px; }
  .book--a1 .cover { height: 203px; }
  .book--a2 { width: 132px; }
  .book--a2 .cover { height: 191px; }
  .book--workshop { width: 123px; }
  .book--workshop .cover { height: 187px; }
  .cover-title { font-size: 16px; }
  .cover-face { padding: 14px 11px 0; }
  .cover-foot { padding: 0 11px 7px; }
  .room-title { max-width: 20ch; }
  .plant { width: 124px; top: -112px; right: 20px; }
  .frame { width: 92px; top: -82px; left: 14px; }
  .frame .pic { height: 86px; }
}

@media (max-width: 720px) {
  body { font-size: 17px; }
  .topbar { padding: 12px 18px; }
  .topbar h1 { font-size: 21px; }
  .rail { padding: 9px 18px; }
  .rail .dots { padding: 3px 0 6px; }
  main { padding: 22px 18px 130px; }
  .foot { padding: 20px 18px 88px; }

  .coverpage .masthead { padding: 20px 18px 10px; }
  .coverpage .masthead .brand { flex: 1 1 100%; }
  .coverpage .masthead .brandsub { font-size: 10px; letter-spacing: .12em; }
  .brand-mark { font-size: 22px; }
  .shelfpage { padding: 0 18px 54px; }
  .room { padding-top: 14px; }
  .room-lede { font-size: 15.5px; }
  .case { margin-top: 38px; padding: 0 6px; }
  .case::before { inset: -9px 0 -9px; }
  .case-back { inset: 0 6px; }
  .case-inner { padding-top: 18px; }
  .shelfrow-books { gap: 10px; }
  .shelfrow { margin-bottom: 26px; }

  /* Auf dem Handy waechst die Pflanze nicht mit -- sie wuerde die Reihe
     verdecken. Das Bild an der Wand verschwindet ganz. */
  .plant { width: 92px; top: -84px; right: 10px; }
  .frame { display: none; }
  /* Auf dem Handy stehen die Dinge neben den Baenden -- aber nur, solange
     sie nicht mit ihnen zusammenstossen. */
  .prop--stack { height: 32px; }
  .prop--stack i { height: 9px; }
  .prop--stack i:nth-child(2) { bottom: 10px; }
  .prop--stack i:nth-child(3) { bottom: 20px; }
  .prop--jar { height: 46px; }
  .prop--jar .body { height: 34px; }
  .prop--jar .lid { bottom: 31px; height: 9px; }
  .prop--jar .lid::after { top: -5px; width: 11px; height: 6px; }

  .book--a1 { width: 112px; }
  .book--a1 .cover { height: 158px; }
  .book--a2 { width: 104px; }
  .book--a2 .cover { height: 147px; }
  .book--workshop { width: 96px; }
  .book--workshop .cover { height: 142px; }

  .cover-face { left: 8px; padding: 11px 8px 0; gap: 6px; }
  .cover-face::after { inset: 7px 6px 6px 6px; }
  .cover-spine { width: 8px; }
  .cover-foot { left: 8px; height: 34px; padding: 0 8px 7px; gap: 1px; }
  .cover-level { font-size: 7.5px; letter-spacing: .16em; }
  .cover-title { font-size: 13px; line-height: 1.12; }
  .book--workshop .cover-title { font-size: 11.5px; }
  .cover-sub { display: none; }
  .cover-count, .cover-mark { font-size: 7.5px; letter-spacing: .1em; }
  .plate { margin-top: 8px; padding: 5px 14px; }
  .plate a { font-size: 9.5px; letter-spacing: .2em; }
  .shelflabel { font-size: 10px; gap: 12px; padding: 8px 16px; margin-top: 12px; }
  .shelflabel span + span::before { margin-right: 12px; }
  .shelflabel span:nth-child(4) { display: none; }
  .plank { margin: -5px -8px 0; }
  .room-foot { margin-top: 44px; font-size: 10px; letter-spacing: .14em; }

  .bhead { padding: 11px 18px; }
  .bookmain { padding: 0 18px 70px; }
  .bcover { padding: 34px 0 24px; margin-bottom: 28px; }
  .bsub { font-size: 16px; }
  .blead { font-size: 16px; }
  .menu-panel { width: 100%; padding: 22px 20px 60px; }
  .rlist a, .rlist .rrow { grid-template-columns: 36px 1fr; grid-template-areas: "num title" "num meta" "num sub"; }
  .rlist .rmeta, .rlist .rstate { grid-area: meta; }
  /* Auf dem Handy passt keine Punktfuhrung -- die Zeile rutscht unter den Titel. */
  .bookpage .rlist a,
  .bookpage .rlist .rrow {
    grid-template-columns: 36px 1fr auto;
    grid-template-areas: "num title meta" "num sub sub";
  }
  .bookpage .rlist .rlead { display: none; }
  .bookpage .rlist .rtitle { font-size: 17.5px; }
}

/* Auf einem sehr schmalen Fenster stehen die Baende schon dicht aneinander.
   Dann bleibt das Brett leer -- dort passt kein Ding mehr neben die Baender. */
@media (max-width: 430px) {
  .prop { display: none; }
}