/* Lora, loaded from this site (no Google servers). Licence: fonts/LICENCE.txt */
@font-face{font-family:'Lora';src:url('fonts/Lora-Variable.ttf') format('truetype');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Lora';src:url('fonts/Lora-Italic-Variable.ttf') format('truetype');font-weight:400 700;font-style:italic;font-display:swap}
/* The Great Christmas Map Rescue: styles. Colours live in :root at the top.
   © 2026 PBInteractiveKids. All rights reserved. Not for resale. */
/* Layout: a storybook page on a frosty sage background with falling snow and the toolbar above.
   Phones held upright get a single page; wider screens get an open two-page spread (section 6). */
:root {
  --ground: #cfdcd5;
  --paper: #fffcf5;
  --frame: #edf1ea;
  --ink: #2b3430;
  --muted: #5c6a63;
  --berry: #a9414d;
  --berry-deep: #7c2c38;
  --pine: #3e6b56;
  --pine-deep: #2a4c3d;
  --gold: #c39a48;
  --gold-soft: #e5cf9c;
  --font-book: "Lora", Georgia, "Times New Roman", serif;
  color-scheme: light;
}
* {
  box-sizing: border-box;
}
html,
body {
  min-height: 100%;
}
body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-book);
  padding-inline: 16px;
  padding-block: 20px 48px;
  overflow-x: hidden;
}
#snow {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.shell {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tools .group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--gold-soft);
  background: var(--paper);
  color: var(--pine-deep);
  font: 500 14px/1 var(--font-book);
  cursor: pointer;
  transition:
    transform 0.15s ease,
    background 0.15s ease;
}
.tool svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.tool:hover {
  transform: translateY(-1px);
}
.tool[aria-pressed="true"] {
  background: var(--pine);
  color: var(--paper);
  border-color: var(--pine);
}
.tool[hidden] {
  display: none !important;
}
.tool.lang {
  position: relative;
}
.tool.lang select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
}
.tool.lang:focus-within {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.page {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border-radius: 6px;
  box-shadow:
    0 1px 0 rgba(38, 62, 50, 0.06),
    0 18px 40px -18px rgba(38, 62, 50, 0.35);
  padding: 34px 44px 26px;
  min-height: 840px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  transform-origin: left center;
}
.page.leaving {
  animation: pageOut 0.3s ease-in forwards;
}
.page.arriving {
  animation: pageIn 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes pageOut {
  to {
    opacity: 0;
    transform: perspective(1400px) rotateY(-14deg) translateX(-24px);
  }
}
@keyframes pageIn {
  from {
    opacity: 0;
    transform: perspective(1400px) rotateY(10deg) translateX(30px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.holly {
  width: 92px;
  height: 46px;
  animation: sway 5s ease-in-out infinite;
  transform-origin: 50% 70%;
}
@keyframes sway {
  0%,
  100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}

.sparkle {
  position: absolute;
  width: 16px;
  height: 16px;
  fill: var(--gold);
  animation: twinkle 3.2s ease-in-out infinite;
}
.sparkle.s1 {
  top: 70px;
  left: 56px;
}
.sparkle.s2 {
  top: 92px;
  right: 64px;
  width: 12px;
  height: 12px;
  animation-delay: 1.1s;
}
.sparkle.s3 {
  top: 52%;
  left: 30px;
  width: 11px;
  height: 11px;
  animation-delay: 2s;
}
.sparkle.s4 {
  top: 58%;
  right: 34px;
  animation-delay: 0.5s;
}
@keyframes twinkle {
  0%,
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.7) rotate(20deg);
  }
}

.bauble {
  position: absolute;
  bottom: 0;
  width: 34px;
  height: 64px;
  transform-origin: 50% 0;
  animation: swing 4s ease-in-out infinite;
}
.bauble.left {
  left: 20px;
  bottom: 14px;
}
.bauble.right {
  right: 20px;
  bottom: 14px;
  animation-delay: -2s;
}
@keyframes swing {
  0%,
  100% {
    transform: rotate(6deg);
  }
  50% {
    transform: rotate(-6deg);
  }
}

.chapter {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--pine-deep);
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  text-wrap: balance;
  margin-top: -6px;
}
.chapter svg {
  width: 16px;
  height: 16px;
  fill: var(--gold);
  flex-shrink: 0;
}

.frame {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 3 / 2;
  border: 2px solid var(--gold);
  border-radius: 12px;
  outline: 1px solid var(--gold-soft);
  outline-offset: 5px;
  background: var(--frame);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.frame.cover {
  aspect-ratio: 1 / 1;
}
.frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
  animation: drift 18s ease-in-out infinite alternate;
}
.frame.has-art img {
  opacity: 1;
}
.frame.has-art .placeholder {
  display: none;
}
/* Pictures speak for themselves: no garland or sparkle dots over them */
.frame.has-art .garland,
.frame.has-art .glint {
  display: none;
}
@keyframes drift {
  from {
    transform: scale(1.02) translate(0, 0);
  }
  to {
    transform: scale(1.09) translate(-1.5%, -1%);
  }
}
.placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 24px 36px;
  max-width: 460px;
}
.placeholder .ph-title {
  font-size: 26px;
  color: var(--pine);
  font-weight: 500;
}
.placeholder .ph-brief {
  font-size: 15px;
  font-style: italic;
  color: var(--muted);
  line-height: 1.5;
}
.ph-btn {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px dashed var(--pine);
  border-radius: 999px;
  background: transparent;
  color: var(--pine-deep);
  font: italic 500 13px/1 var(--font-book);
  cursor: pointer;
}
.ph-btn svg {
  width: 16px;
  height: 16px;
}
.frame .glint {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.6;
  animation: twinkle 2.6s ease-in-out infinite;
}
.garland {
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 2;
  pointer-events: none;
}

.story {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 19px;
  line-height: 1.75;
}
.story p {
  margin: 0;
  animation: rise 0.6s ease-out both;
}
.story p:nth-child(2) {
  animation-delay: 0.12s;
}
.story p:nth-child(3) {
  animation-delay: 0.24s;
}
@keyframes rise {
  from {
    opacity: 0.15;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.story.drop p:first-child::first-letter {
  float: left;
  font-size: 74px;
  line-height: 0.8;
  font-weight: 600;
  color: var(--berry);
  margin: 8px 12px 0 0;
}
.name {
  color: var(--berry);
  font-weight: 700;
  font-style: italic;
}
.sfx {
  display: inline;
  padding: 0 2px;
  margin: 0;
  border: none;
  background: none;
  color: var(--berry);
  font: italic 700 1em/1 var(--font-book);
  border-bottom: 2px dotted var(--gold);
  cursor: pointer;
}
.sfx svg {
  width: 0.75em;
  height: 0.75em;
  margin-left: 3px;
  vertical-align: -1px;
  fill: var(--gold);
}
.sfx:hover {
  color: var(--berry-deep);
}
.sfx.boop {
  animation: boop 0.5s ease;
  display: inline-block;
}
@keyframes boop {
  0%,
  100% {
    transform: none;
  }
  25% {
    transform: rotate(-6deg) scale(1.12);
  }
  60% {
    transform: rotate(5deg) scale(1.06);
  }
}

.prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.prompt h2 {
  margin: 0;
  font-size: 23px;
  font-style: italic;
  font-weight: 600;
  color: var(--pine-deep);
  text-align: center;
  text-wrap: balance;
}
.prompt svg {
  width: 270px;
  max-width: 100%;
  height: 12px;
}

.choices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  width: 100%;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 28px;
  border: none;
  border-radius: 999px;
  background: var(--berry);
  color: var(--paper);
  box-shadow:
    inset 0 0 0 4px var(--berry),
    inset 0 0 0 5.5px rgba(255, 249, 245, 0.75),
    0 6px 14px -8px rgba(38, 62, 50, 0.7);
  font: 600 15px/1.2 var(--font-book);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    filter 0.15s ease;
}
.btn.alt {
  background: var(--pine);
  box-shadow:
    inset 0 0 0 4px var(--pine),
    inset 0 0 0 5.5px rgba(255, 249, 245, 0.75),
    0 6px 14px -8px rgba(42, 76, 61, 0.7);
}
.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}
.btn .arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.badge-hint {
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
  text-align: center;
  display: flex;
  align-items: center;
  gap: 6px;
}
.badge-hint svg {
  width: 14px;
  height: 14px;
  fill: var(--gold);
}

.foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding-top: 10px;
}
.pnum {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--frame);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Cover */
.eyebrow {
  margin: 0;
  font-size: 21px;
  color: var(--pine);
  font-weight: 400;
}
.title {
  margin: -10px 0 0;
  text-align: center;
  line-height: 1;
}
.title .small {
  display: block;
  font-size: 34px;
  font-style: italic;
  font-weight: 600;
  color: var(--pine-deep);
}
.title .big {
  display: block;
  font-size: clamp(46px, 11vw, 70px);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-top: 4px;
  padding: 0 4px 6px;
}
.tags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
  width: 100%;
}
.tag {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  padding: 18px 16px 12px;
  background: var(--paper);
  border: 1px solid var(--gold);
  border-radius: 10px;
  outline: 1px solid var(--gold-soft);
  outline-offset: -6px;
}
.tag::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--berry);
  box-shadow:
    9px 2px 0 -1px var(--berry-deep),
    -9px 2px 0 -1px var(--berry-deep);
}
.tag label {
  font-size: 15px;
  font-style: italic;
  font-weight: 600;
  color: var(--pine-deep);
  text-align: center;
}
.tag input {
  width: 100%;
  min-width: 0;
  border: none;
  border-bottom: 1.5px solid var(--pine);
  background: transparent;
  padding: 6px 4px;
  font: 500 18px/1.2 var(--font-book);
  color: var(--ink);
  text-align: center;
}
.tag input:focus {
  outline: none;
  border-bottom-color: var(--gold);
  background: var(--frame);
}
.tag .left {
  font-size: 12px;
  font-style: italic;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.tag .left.full {
  color: var(--berry-deep);
  font-weight: 600;
}
.name {
  overflow-wrap: anywhere;
}
.note {
  margin: 0;
  font-size: 16px;
  font-style: italic;
  color: var(--pine);
  text-align: center;
  text-wrap: balance;
}
details.grownups {
  width: 100%;
  font-size: 15px;
  color: var(--muted);
}
details.grownups summary {
  cursor: pointer;
  text-align: center;
  color: var(--pine-deep);
  text-decoration: underline dotted;
  text-underline-offset: 4px;
  list-style: none;
}
details.grownups summary::-webkit-details-marker {
  display: none;
}
details.grownups ul {
  margin: 12px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  line-height: 1.55;
}

/* End + badges */
.the-end {
  font-size: 40px;
  font-style: italic;
  font-weight: 600;
  color: var(--pine-deep);
  display: flex;
  align-items: center;
  gap: 14px;
}
.the-end svg {
  width: 22px;
  height: 22px;
  fill: var(--gold);
}
.badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 10px;
  width: 100%;
}
.badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink);
}
.badge svg {
  width: 64px;
  height: 64px;
}
.badge.locked {
  color: var(--muted);
}
.badge.locked svg {
  opacity: 0.45;
}
.badge.new svg {
  animation: pop 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
@keyframes pop {
  from {
    transform: scale(0.3) rotate(-30deg);
  }
  to {
    transform: none;
  }
}
.count {
  font-size: 18px;
  text-align: center;
  margin: 0;
}
.count strong {
  color: var(--berry);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px 12px 14px;
  background: var(--paper);
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  box-shadow: 0 14px 30px -12px rgba(38, 62, 50, 0.5);
  transform: translate(-50%, 140%);
  transition: transform 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
  font-size: 16px;
  max-width: calc(100% - 32px);
}
.toast.show {
  transform: translate(-50%, 0);
}
.toast svg {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.toast span {
  color: var(--muted);
  font-style: italic;
}
.toast strong {
  color: var(--berry);
  font-style: normal;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
}
.brand .logo {
  max-height: 44px;
  max-width: 160px;
  width: auto;
  display: block;
}
.brand .brand-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pine-deep);
}
.brand.has-logo .brand-name {
  display: none;
}
.copy {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
  text-wrap: balance;
  max-width: 440px;
}
.cert .brand {
  margin-top: 14px;
}
.cert .copy {
  margin-top: 2px;
}
img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
/* ---------- Gold foil lettering ---------- */
.foil {
  background-image: linear-gradient(
    100deg,
    #8a6420 0%,
    #b8913f 18%,
    #f4e2a8 30%,
    #c9a04e 40%,
    #94701f 58%,
    #d9b565 76%,
    #8a6420 100%
  );
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(90, 60, 10, 0.28));
  animation: foil 7s ease-in-out infinite;
}
@keyframes foil {
  0%,
  100% {
    background-position: 100% 0;
  }
  50% {
    background-position: 0 0;
  }
}
.chapter span,
.the-end,
.cert-title {
  background-image: linear-gradient(
    100deg,
    #7a5618 0%,
    #a9832f 20%,
    #e9d191 32%,
    #b8913f 44%,
    #84621a 62%,
    #c9a04e 80%,
    #7a5618 100%
  );
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: foil 7s ease-in-out infinite;
}
.the-end svg,
.chapter svg {
  -webkit-text-fill-color: initial;
}

/* ---------- Framed picture plates ---------- */
.plate {
  position: relative;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.plate .frame {
  border: 1.5px solid #b58a3a;
  outline: 1px solid #d9b565;
  outline-offset: 5px;
  border-radius: 4px;
  box-shadow:
    0 0 0 9px var(--paper),
    0 0 0 10px rgba(181, 138, 58, 0.45);
}
.corner {
  position: absolute;
  width: 46px;
  height: 46px;
  z-index: 3;
  pointer-events: none;
}
.corner.tl {
  top: -6px;
  left: -6px;
}
.corner.tr {
  top: -6px;
  right: -6px;
  transform: scaleX(-1);
}
.corner.bl {
  bottom: -6px;
  left: -6px;
  transform: scaleY(-1);
}
.corner.br {
  bottom: -6px;
  right: -6px;
  transform: scale(-1, -1);
}

/* ---------- Satin ribbon bookmark ---------- */
.book-wrap {
  position: relative;
}
.ribbon {
  --p: 0;
  position: absolute;
  top: -6px;
  right: 46px;
  width: 26px;
  z-index: 4;
  height: calc(64px + var(--p) * 120px);
  background: linear-gradient(
    90deg,
    #7c2c38 0%,
    #a9414d 30%,
    #c45a66 48%,
    #a9414d 66%,
    #7c2c38 100%
  );
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 13px), 0 100%);
  filter: drop-shadow(0 4px 3px rgba(60, 20, 25, 0.35));
  transition: height 0.9s cubic-bezier(0.3, 0.7, 0.3, 1);
  pointer-events: none;
}

/* ---------- The hardback cover that opens ---------- */
body.closed {
  overflow: hidden;
}
.hardback {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  box-sizing: border-box;
  background: radial-gradient(
    ellipse at 50% 40%,
    #dde7e1 0%,
    var(--ground) 70%
  );
  perspective: 2000px;
  transition: opacity 0.7s ease;
}
.hardback.gone {
  opacity: 0;
  pointer-events: none;
}
.hb-book {
  position: relative;
  width: min(400px, 82vw, calc((100vh - 60px) * 0.75));
  aspect-ratio: 3 / 4;
}
.hb-pages {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 8px;
  right: -9px;
  border-radius: 0 8px 8px 0;
  background: repeating-linear-gradient(90deg, #fffcf5 0 2px, #e9e1cf 2px 3px);
  box-shadow: 0 30px 60px -22px rgba(20, 40, 30, 0.55);
}
.hb-inside {
  position: absolute;
  inset: 0;
  border-radius: 3px 8px 8px 3px;
  background: var(--paper);
  display: flex;
  padding: 16px;
  box-sizing: border-box;
}
.hb-inside-line {
  flex: 1;
  border: 1px solid #d9b565;
  border-radius: 2px;
}
.hb-cover {
  position: absolute;
  inset: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  background: none;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 1.35s cubic-bezier(0.55, 0.05, 0.3, 1);
  animation: hbFloat 4.5s ease-in-out infinite;
}
@keyframes hbFloat {
  0%,
  100% {
    transform: translateY(0) rotateY(-4deg);
  }
  50% {
    transform: translateY(-6px) rotateY(-2deg);
  }
}
.hb-cover.open {
  animation: none;
  transform: rotateY(-168deg);
}
.hb-front,
.hb-back {
  position: absolute;
  inset: 0;
  border-radius: 3px 10px 10px 3px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.hb-front {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 26px 20px 38px;
  box-sizing: border-box;
  background: linear-gradient(
    90deg,
    #1b3a2c 0,
    #24493a 5%,
    #2a4c3d 9%,
    #2e5444 50%,
    #2a4c3d 100%
  );
  box-shadow:
    inset 12px 0 10px -6px rgba(0, 0, 0, 0.35),
    inset -2px 0 0 rgba(255, 255, 255, 0.06),
    0 24px 50px -18px rgba(15, 30, 22, 0.7);
  color: #f4e2a8;
  text-align: center;
  font-family: var(--font-book);
}
.hb-front::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(#b58a3a, #f4e2a8, #b58a3a);
  opacity: 0.7;
}
.hb-line {
  position: absolute;
  inset: 12px 12px 12px 26px;
  border: 1.5px solid rgba(217, 181, 101, 0.75);
  border-radius: 2px;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 4px #2e5444,
    inset 0 0 0 5px rgba(217, 181, 101, 0.45);
}
.hb-kicker {
  position: relative;
  font-size: clamp(11px, 2.6vw, 13px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #e9d191;
  margin-top: 8px;
}
.hb-title {
  position: relative;
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.hb-small {
  font-size: clamp(20px, 5vw, 26px);
  font-style: italic;
  font-weight: 600;
}
.hb-big {
  font-size: clamp(40px, 10.5vw, 54px);
  font-weight: 600;
  padding-bottom: 6px;
}
.hb-window {
  position: relative;
  flex: 1;
  width: 82%;
  min-height: 0;
  border: 1.5px solid #d9b565;
  outline: 1px solid rgba(217, 181, 101, 0.5);
  outline-offset: 4px;
  border-radius: 3px;
  overflow: hidden;
  background: #24493a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hb-window img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hb-noimg {
  font-size: 13px;
  font-style: italic;
  color: #e9d191;
  opacity: 0.8;
}
.hb-cover.has-img .hb-noimg {
  display: none;
}
.hb-tap {
  position: relative;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f4e2a8;
  animation: tapPulse 2s ease-in-out infinite;
}
@keyframes tapPulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}
.hb-back {
  transform: rotateY(180deg);
  background: #2a4c3d
    radial-gradient(
      circle at 20px 20px,
      rgba(217, 181, 101, 0.35) 0 1.5px,
      transparent 2px
    )
    0 0 / 40px 40px;
  box-shadow: inset 0 0 0 10px var(--paper);
}
.hb-cover:focus-visible .hb-front {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}

.linkbtn {
  border: none;
  background: none;
  padding: 8px 4px;
  margin: 4px auto 0;
  display: block;
  font: italic 500 14px/1.3 var(--font-book);
  color: var(--muted);
  text-decoration: underline dotted;
  text-underline-offset: 4px;
  cursor: pointer;
}
.linkbtn.confirm {
  color: var(--berry-deep);
  font-weight: 700;
}

/* Certificate */
.cert {
  width: 100%;
  padding: 10px;
  border: 2px solid var(--gold);
  border-radius: 14px;
  background: var(--paper);
}
.cert-inner {
  border: 1px solid var(--gold-soft);
  border-radius: 8px;
  padding: 26px 22px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  background: radial-gradient(
    ellipse at 50% 0%,
    var(--frame),
    var(--paper) 70%
  );
}
.cert-eyebrow {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pine);
  font-weight: 600;
}
.cert-title {
  margin: 0;
  font-size: clamp(32px, 8vw, 46px);
  line-height: 1.05;
  font-style: italic;
  font-weight: 600;
  color: var(--berry);
  text-wrap: balance;
}
.cert-line {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
}
.cert-name {
  margin: 2px 0;
  font-size: clamp(36px, 9vw, 54px);
  line-height: 1.1;
  font-weight: 700;
  color: var(--pine-deep);
  border-bottom: 1.5px solid var(--gold);
  padding: 0 24px 4px;
  overflow-wrap: anywhere;
}
.cert-seals {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
  margin: 8px 0 4px;
}
.cert-seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 78px;
  font-size: 11px;
  line-height: 1.25;
  color: var(--muted);
}
.cert-seal svg {
  width: 44px;
  height: 44px;
}
.cert-none {
  margin: 0;
  font-style: italic;
  color: var(--muted);
}
.cert-sign {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin-top: 10px;
}
.cert-sign div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border-top: 1px solid var(--gold);
  padding-top: 6px;
}
.cert-sign .sig {
  font-size: 18px;
  font-style: italic;
  font-weight: 600;
  color: var(--pine-deep);
}
.cert-sign .role {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

@media print {
  @page {
    size: landscape;
    margin: 10mm;
  }
  body {
    background: #fff;
    padding: 0;
  }
  #snow,
  .tools,
  .toast,
  .no-print,
  .sparkle,
  .bauble,
  .ribbon,
  .hardback {
    display: none !important;
  }
  .shell {
    max-width: none;
  }
  .page {
    box-shadow: none;
    min-height: 0;
    padding: 0;
    animation: none !important;
  }
  .page:not(.is-cert) {
    display: none;
  }
  .cert {
    break-inside: avoid;
  }
  .cert-inner {
    padding: 18px 40px;
  }
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

@media (max-width: 560px) {
  .page {
    padding: 26px 20px 20px;
    min-height: 0;
  }
  .story {
    font-size: 18px;
  }
  .tags {
    grid-template-columns: minmax(0, 1fr);
  }
  .badges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bauble,
  .sparkle.s3,
  .sparkle.s4 {
    display: none;
  }
  .tool .label {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Picture frames while loading ---------- */
.frame:not(.has-art) {
  aspect-ratio: auto !important;
  min-height: 260px;
  background:
    radial-gradient(
      ellipse 60% 55% at 30% 35%,
      rgba(62, 107, 86, 0.12),
      transparent 70%
    ),
    radial-gradient(
      ellipse 55% 50% at 75% 70%,
      rgba(169, 65, 77, 0.1),
      transparent 70%
    ),
    var(--frame);
}
.placeholder {
  max-width: 520px;
  padding: 24px 20px;
  gap: 10px;
}
.ph-kicker {
  font: 600 12px/1 var(--font-book);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--berry);
}
.placeholder .ph-title {
  font-size: 25px;
  font-weight: 600;
  font-style: italic;
  color: var(--pine-deep);
}
.ph-file {
  font:
    13px/1.4 ui-monospace,
    Menlo,
    Consolas,
    monospace;
  color: var(--ink);
  background: var(--paper);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px dashed var(--gold);
}
.ph-prompt {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  text-align: left;
  background: rgba(255, 252, 245, 0.85);
  border-left: 3px solid var(--gold);
  padding: 10px 12px;
  border-radius: 0 6px 6px 0;
  max-height: 180px;
  overflow: auto;
}
.ph-style {
  margin: 0;
  font-size: 12.5px;
  font-style: italic;
  color: var(--muted);
}
.ph-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.ph-btn.solid {
  border-style: solid;
  background: var(--pine);
  color: var(--paper);
  border-color: var(--pine);
  font-style: normal;
  font-weight: 600;
}
@media (max-width: 560px) {
  .ph-prompt {
    max-height: 150px;
    font-size: 14px;
  }
}

/* ---------- Responsive sizing ----------
   Everything scales with the width of the book page (cqi = 1% of the page width),
   so text, buttons and boxes stay in proportion on phones, tablets and big screens. */
.page {
  container-type: inline-size;
}
@media (min-width: 700px) {
  .shell {
    max-width: min(1260px, 88vw);
  }
  .page {
    padding: clamp(34px, 4vw, 60px) clamp(32px, 5vw, 84px) 32px;
  }
}

/* Gold foil: room for the tails of g, p and y so they never get clipped */
.foil {
  display: inline-block;
  line-height: 1.18;
  padding-bottom: 0.16em;
  margin-bottom: -0.1em;
}
.title {
  line-height: 1.1;
}

.eyebrow {
  font-size: clamp(17px, 3cqi, 24px);
}
.title .small {
  font-size: clamp(28px, 5cqi, 42px);
}
.title .big {
  font-size: clamp(46px, 10.5cqi, 92px);
}
.chapter {
  font-size: clamp(21px, 3.6cqi, 32px);
}
.story {
  font-size: clamp(17px, 2.9cqi, 23px);
}
.story.drop p:first-child::first-letter {
  font-size: 3.9em;
}
.prompt h2 {
  font-size: clamp(20px, 3.4cqi, 28px);
}
.btn {
  font-size: clamp(14px, 2.2cqi, 17px);
  min-height: clamp(48px, 7cqi, 58px);
  padding: 12px clamp(22px, 4cqi, 34px);
}
.badge-hint {
  font-size: clamp(12px, 1.9cqi, 15px);
}
.tags {
  gap: clamp(16px, 2.6cqi, 24px);
}
.tag label {
  font-size: clamp(14px, 2.2cqi, 17px);
}
.tag input {
  font-size: clamp(17px, 2.8cqi, 22px);
}
.tag .left {
  font-size: clamp(11px, 1.7cqi, 13px);
}
.note {
  font-size: clamp(15px, 2.4cqi, 19px);
}
details.grownups {
  font-size: clamp(14px, 2.2cqi, 17px);
}
.brand .brand-name {
  font-size: clamp(13px, 2cqi, 16px);
}
.copy {
  font-size: clamp(11px, 1.7cqi, 13px);
  max-width: 62ch;
}
.pnum {
  width: clamp(30px, 4.6cqi, 40px);
  height: clamp(30px, 4.6cqi, 40px);
  font-size: clamp(13px, 1.9cqi, 16px);
}
.holly {
  width: clamp(80px, 14cqi, 120px);
  height: auto;
}
.badge {
  font-size: clamp(13px, 2cqi, 16px);
}
.badge svg {
  width: clamp(56px, 9cqi, 80px);
  height: clamp(56px, 9cqi, 80px);
}
.count {
  font-size: clamp(16px, 2.6cqi, 21px);
}
.the-end {
  font-size: clamp(34px, 6cqi, 52px);
}

/* ---------- Layout details ---------- */
/* 1. The badge pop-up stays fully hidden until a badge is earned */
.toast { transition: transform 0.45s cubic-bezier(0.2, 1.4, 0.4, 1), opacity 0.3s, visibility 0.3s; }
.toast:not(.show) { opacity: 0; visibility: hidden; }

/* 2. Keep each picture small enough to fit on screen with room for the words */
.plate { max-width: min(100%, calc(100vh - 230px), 760px); margin-inline: auto; }

/* 3. Comfortable reading width for the story text on wide screens */
.story { max-width: 40em; margin-inline: auto; }
.tags { max-width: 760px; margin-inline: auto; }

/* 4. Phones: name boxes two-across so the cover isn't so long, and no sparkle over the words */
@media (max-width: 560px) {
  .tags { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
  .tag { padding: 16px 8px 10px; }
  .tag label { font-size: 12.5px; line-height: 1.3; min-height: 2.6em; display: flex; align-items: center; }
  .tag input { font-size: 17px; }
  .sparkle.s2 { display: none; }
}

/* ---------- Watercolour decorations ---------- */
.holly { width: clamp(62px, 7.5cqi, 80px); height: auto; }
/* Baubles in the bottom corners, hanging on a gold thread from a little holly sprig */
.bauble { position: absolute; top: auto; bottom: 14px; width: clamp(30px, 4cqi, 40px); height: auto;
  display: flex; flex-direction: column; align-items: center; z-index: 2; }
.bauble.left { left: 22px; }
.bauble.right { right: 22px; }
.bauble .pin { width: 130%; max-width: none; height: auto; display: block; position: relative; z-index: 1; animation: none; }
.bauble .thread { display: block; width: 1.5px; height: clamp(30px, 5cqi, 48px); margin-top: 0;
  background: linear-gradient(#b58a3a, #e5cf9c 60%, #c39a48); transform-origin: 50% 0; }
.bauble .ball { width: 100%; height: auto; display: block; margin-top: -2px; }
.bauble { animation: none; }
.bauble .thread, .bauble .ball { animation: none; }
.bauble .swing { display: flex; flex-direction: column; align-items: center; width: 100%; transform-origin: 50% 0; animation: swing 4s ease-in-out infinite; }
.bauble.right .swing { animation-delay: -2s; }
.prompt .divider { width: min(210px, 60%); height: auto; display: block; }
@media (max-width: 560px) { .bauble { display: none; } }

/* "What happened" line after a choice */
.story p.after { font-style: italic; color: var(--pine-deep); }
.hardback[hidden] { display: none; }

/* ---------- Bookplate on the first inside page (seen as the cover opens) ---------- */
.hb-inside { background: radial-gradient(ellipse at 50% 35%, #fffdf7 0%, #f7f0de 100%); }
.hb-inside-line { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; font-family: var(--font-book); padding: 18px;
  box-shadow: inset 0 0 0 5px #fffcf5, inset 0 0 0 6px rgba(181,138,58,.45); }
.bp-holly { width: 34%; height: auto; }
.bp-small { font-size: clamp(13px, 3.4vw, 16px); font-style: italic; color: var(--pine); letter-spacing: .04em; }
.bp-name { font-size: clamp(30px, 8vw, 44px); font-weight: 700; font-style: italic; max-width: 100%; overflow-wrap: anywhere; }
.bp-rule { width: 62%; height: auto; }
.bp-note { font-size: clamp(11px, 2.8vw, 13px); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.bp-stars { color: var(--gold); font-size: 14px; animation: tapPulse 2s ease-in-out infinite; }

/* ---------- Spacing ---------- */
/* Sound words wrap like normal words, even long ones */
.sfx { display: inline; line-height: inherit; text-align: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sfx.boop { display: inline; animation: boopGlow .5s ease; }
@keyframes boopGlow { 0%,100% { color: var(--berry); } 40% { color: var(--gold); text-shadow: 0 0 10px rgba(195,154,72,.55); } }
.sfx:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 3px; }
/* The ribbon is a bookmark, not a cover-up: no ribbon on the certificate */
.page.is-cert + .ribbon { display: none; }
/* Tablets and small laptops: side sparkles would sit on the words, and the ribbon grows less */
@media (max-width: 999px) {
  .sparkle.s3, .sparkle.s4 { display: none; }
  .ribbon { height: calc(52px + var(--p) * 36px); right: 28px; }
  .chapter, .count { padding-inline: 40px; }
}
/* Phones: no floating sparkles, a slim short ribbon tucked in the corner */
@media (max-width: 560px) {
  .sparkle { display: none; }
  .ribbon { right: 12px; width: 18px; height: calc(38px + var(--p) * 20px); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 9px), 0 100%); }
  .chapter, .count { padding-inline: 18px; }
  .chapter { gap: 8px; }
}

/* Chapter openings: small capitals instead of a big drop letter */
.story.drop p:first-child::first-letter { float: none; font-size: inherit; line-height: inherit; margin: 0; color: inherit; font-weight: inherit; }
.story .lead { font-variant: small-caps; font-weight: 600; letter-spacing: .06em; color: var(--berry); font-size: 1.08em; }

.title .small { font-size: clamp(24px, 4.4cqi, 38px); }
.title .big { font-size: clamp(44px, 10cqi, 88px); }
.hb-small { font-size: clamp(18px, 4.4vw, 23px); }
.hb-big { font-size: clamp(36px, 9.5vw, 50px); }

/* More breathing room between the title/heading and the framed picture (clear of the ribbon) */
.page > .plate { margin-top: clamp(10px, 2.4cqi, 26px); }

/* Certificate name: smaller for longer names, never split mid-word */
.cert-name { overflow-wrap: normal; word-break: keep-all; max-width: 100%; }
.cert-name.mid { font-size: clamp(30px, 7.5vw, 48px); }
.cert-name.long { font-size: clamp(24px, 6vw, 40px); padding-inline: 10px; }
@media (max-width: 560px) { .cert-sign .sig { font-size: 15px; } .cert-sign .role { font-size: 10.5px; } }

/* Accessibility: hidden headings for screen readers, headings look as before */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
h1.chapter, h2.chapter { margin-block: -6px 0; }
#pageHead:focus, .title:focus { outline: none; }

/* Shop name: upright, readable as written, with a little gold star either side */
.brand .brand-name { text-transform: none; letter-spacing: .01em; font-style: italic; font-weight: 600; font-size: clamp(16px, 2.4cqi, 20px); color: var(--pine-deep); display: inline-flex; align-items: center; gap: 10px; }
.brand .brand-name::before, .brand .brand-name::after { content: "✦"; font-style: normal; font-size: .7em; color: var(--gold); }
.brand .brand-name { font-style: normal; font-weight: 600; letter-spacing: .03em; font-size: clamp(15px, 2.2cqi, 18px); }

/* ---------- Navigation polish ---------- */
.tool:disabled { opacity: .38; cursor: default; transform: none; }
.progress { display: flex; justify-content: center; gap: 7px; }
.progress .dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--gold); background: transparent; }
.progress .dot.done { background: var(--gold); }
.progress .dot.now { background: var(--berry, #A9414D); border-color: var(--berry, #A9414D); transform: scale(1.25); }
.pnum { width: auto !important; min-width: clamp(30px, 4.6cqi, 40px); padding: 0 12px; border-radius: 999px; }
.pnum .of { font-weight: 400; opacity: .75; margin-left: .3em; }
@media (max-width: 560px) {
  /* Phones: small word under each icon so the buttons are clear */
  .tools, .tools .group { gap: 5px; flex-wrap: nowrap; }
  .tool { flex-direction: column; justify-content: center; gap: 2px; min-height: 50px; min-width: 50px; padding: 4px 6px; border-radius: 14px; }
  .tool .label { display: block; font-size: 10px; line-height: 1.1; letter-spacing: .01em; white-space: nowrap; }
  .tool.lang::after { content: "Language"; font-size: 10px; line-height: 1.1; }
  .tool.lang svg { display: none; }
  .tool.lang #langShort { font-size: 13px; font-weight: 600; line-height: 18px; }
}
@media (max-width: 370px) {
  .tools, .tools .group { gap: 4px; }
  .tool { min-width: 0; width: 44px; padding: 4px 2px; }
  .tool .label, .tool.lang::after { font-size: 9px; white-space: normal; text-align: center; }
}

/* 5. Desktop: a smaller, more book-like page so the picture and the first words fit on screen together */
@media (min-width: 700px) {
  .shell { max-width: min(980px, 80vw); }
  .plate { max-width: min(100%, calc(100vh - 340px), 580px); }
}

/* 6. Any wide screen (computers, tablets and phones held sideways): an open-book spread,
   picture on the left page and the words on the right page */
.leaf { display: contents; }
@media (orientation: landscape) and (max-height: 500px), (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .shell { max-width: min(1240px, 94vw); }
  .page:has(> .plate) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(40px, 7cqi, 110px);
    align-items: start;
    min-height: 0;
    padding: clamp(28px, 4cqi, 56px) 92px clamp(28px, 4cqi, 56px) clamp(56px, 6.5cqi, 92px);
  }
  /* a soft fold down the middle, like the gutter of a real book */
  .page:has(> .plate)::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 46px; transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(60, 50, 30, 0.08) 50%, transparent);
    pointer-events: none;
  }
  .page:has(> .plate) > .plate {
    width: 100%; max-width: min(100%, calc(100vh - 150px));
    justify-self: center; margin: 0;
    position: sticky; top: 24px; align-self: start;
  }
  /* the right-hand page: one centred column, everything on the same middle line */
  .page:has(> .plate) > .leaf {
    display: flex; flex-direction: column; align-items: center;
    gap: clamp(12px, 1.6cqi, 22px);
    width: 100%; max-width: 34em; justify-self: center;
    padding: 10px 0;
    text-align: center;
  }
  .leaf > * { margin-top: 0 !important; margin-bottom: 0 !important; }
  .leaf .holly { width: clamp(70px, 8cqi, 100px); }
  .leaf .chapter { justify-content: center; font-size: clamp(20px, 2.3cqi, 30px); }
  .leaf .story { max-width: none; width: 100%; text-align: left; font-size: clamp(17px, 1.75cqi, 21px); }
  .leaf .story p { margin: 0 0 .8em; }
  .leaf .story p:last-child { margin-bottom: 0; }
  .leaf .prompt { width: 100%; }
  .leaf .choices { width: 100%; max-width: 26em; }
  .leaf .btn { font-size: clamp(13px, 1.3cqi, 16px); }
  .leaf .foot { width: 100%; }
  .leaf .eyebrow { margin: 0; }
  .leaf .title .small { font-size: clamp(20px, 2.6cqi, 32px); }
  .leaf .title .big { font-size: clamp(34px, 5cqi, 64px); }
  .leaf .tags { max-width: none; width: 100%; }
  .page:has(> .plate) .sparkle.s2 { display: none; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .tool { min-height: 34px; }
  .shell { padding-top: 8px; max-width: none; }
}

/* 7. The opening book: when the cover swings open, slide the whole book over so the open
   spread sits in the middle of the screen, and shrink it if the screen is too narrow */
.hb-book { transition: transform 1.35s cubic-bezier(0.55, 0.05, 0.3, 1); }
.hardback.is-open .hb-book { transform: translateX(calc(50% * var(--fit, 1))) scale(var(--fit, 1)); }
.hardback.gone { transition: opacity 0.45s ease; }

/* 8. While a picture is still loading: a gentle shimmer on a square page, no words */
.frame:not(.has-art) { aspect-ratio: 1 !important; min-height: 0; overflow: hidden; }
.frame:not(.has-art)::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 252, 245, 0.55) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: artShimmer 1.6s ease-in-out infinite;
}
@keyframes artShimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.frame img.art { transition: opacity .5s ease; }
.placeholder, .ph-btn, .hb-noimg { display: none !important; }

/* 9. Certificate and badges pages */
/* certificate signature labels: readable on phones */
@media screen and (max-width: 560px) { .cert-sign .role { font-size: 12px; letter-spacing: .06em; } }
/* badges and certificate pages: no corner sparkles over the words, and room for the bookmark ribbon */
.page:not(:has(> .plate)) .sparkle { display: none; }
@media (min-width: 700px) { .page:not(:has(> .plate)) { padding-left: 92px; padding-right: 92px; } }

/* 10. Example names shown faintly in empty name boxes */
.tag input::placeholder { color: #7d8a84; font-style: italic; font-weight: 400; opacity: 1; }

/* 11. Even, book-like text: balanced line breaks, no lone words, slightly tighter spacing */
.story p { text-wrap: pretty; }
.leaf .story { line-height: 1.62; }
.leaf .story p, .leaf .story p:last-child { margin: 0; }
.leaf .story { gap: .65em; }
.sfx svg { margin-left: .12em; }

/* 12. Sound words: small raised speaker icon so the next comma or full stop sits close, no odd gaps */
.sfx { padding: 0; }
.sfx svg { width: .55em; height: .55em; margin: 0 0 0 .1em; vertical-align: .5em; }

/* 13. Opening book: no gold box when the page loads; the ring only appears for keyboard users */
.hb-cover:focus, .hb-cover:focus-visible { outline: none; }
.hb-cover:focus-visible .hb-front { outline: none; }
html.kbd .hb-cover:focus .hb-front { outline: 3px solid var(--gold); outline-offset: 4px; }