/* Shared paper, chapter colors and controls for the children's album. */
body.album-site { --chapter-ink: #456c4c; --chapter-soft: #e4edcf; --paper-fibers: url('/static/img/album/paper-fibers.webp'); }
body.album-site[data-section="play"] { --chapter-ink: #974a2d; --chapter-soft: #f7dfb2; }
body.album-site[data-section="ask"] { --chapter-ink: #315e78; --chapter-soft: #d8eaf1; }
body.album-site[data-section="book"] { --chapter-ink: #845330; --chapter-soft: #f3e2bd; }
body.album-site .site-nav.site-nav--desk .nav-links a {
  border-radius: 5px 12px 5px 8px; box-shadow: 1px 3px 0 #50391d12;
  transition: transform .18s,box-shadow .18s;
}
body.album-site .site-nav.site-nav--desk .nav-links a[aria-current="page"] {
  outline: 2px dashed #66523d; outline-offset: -5px; box-shadow: 1px 4px 0 #50391d22;
}
body.album-site .site-nav.site-nav--desk .nav-links a:hover { transform: translateY(-3px); }
body.album-site .site-nav.site-nav--desk .nav-links a[href="/"] { background: #f2d6c9; }
body.album-site .site-nav.site-nav--desk .nav-links a[href="/play"] { background: #f7dfb2; }
body.album-site .site-nav.site-nav--desk .nav-links a[href="/ask"] { background: #d8eaf1; }
body.album-site .site-nav.site-nav--desk .nav-links a[href="/book"] { background: #f3e2bd; }
body.album-site .site-nav.site-nav--desk .nav-links a[href="/pet"] { background: #e4edcf; }
body.page-home.album-home.album-site .sheet--hero {
  background-image: repeating-linear-gradient(0deg,transparent 0 31px,#759aae19 31px 32px),linear-gradient(#fff9e9d9,#fff9e9d9),var(--paper-fibers);
  background-size: auto,auto,500px;
}
body.page-home.album-home.album-site .album-card { background-image: var(--paper-fibers); background-size: 420px; background-blend-mode: multiply; }
body.page-home.album-home.album-site .album-how { background-image: linear-gradient(#fffaf0d9,#fffaf0d9),var(--paper-fibers); background-size: auto,500px; }
body.page-inner.album-site .inner-card--north {
  max-width: 760px; overflow: visible; margin-top: 24px; padding: 40px 44px 36px;
  background-color: #fffbef;
  background-image: linear-gradient(90deg,transparent 0 25px,#c875651f 25px 27px,transparent 27px),linear-gradient(#fffbefc9,#fffbefc9),var(--paper-fibers);
  background-size: auto,auto,500px;
  border: 1px solid #c9b59777; border-left: 9px solid var(--chapter-soft);
  border-radius: 6px 20px 20px 6px;
  box-shadow: 4px 5px 0 #ecdfc8,8px 9px 0 #fbf1de,0 18px 35px #58452220;
}
body.page-inner.album-site .inner-card--north::before {
  content: ''; display: block; position: absolute; top: -13px; left: 35px;
  width: 96px; height: 27px; background: repeating-linear-gradient(45deg,#ffffff22 0 6px,transparent 6px 12px),var(--chapter-soft);
  opacity: .92; transform: rotate(-7deg); box-shadow: 0 2px 3px #59493218; pointer-events: none;
}
body.page-inner.album-site .north-aurora { display: none; }
body.page-inner.album-site .album-page-sticker { position: absolute; width: 120px; height: 120px; object-fit: contain; top: 24px; right: 24px; transform: rotate(7deg); }
body.page-inner.album-site .inner-card:has(.album-page-sticker) > :is(.page-eyebrow,.page-title,.lead) { max-width: calc(100% - 110px); }
body.page-inner.album-site .page-eyebrow { display: inline-block; color: var(--chapter-ink); font-size: 22px !important; margin-bottom: 5px; }
body.page-inner.album-site .page-title { color: #413327; font-size: clamp(38px,5vw,54px) !important; margin-top: 4px; margin-bottom: 14px; text-wrap: balance; }
body.page-inner.album-site .lead { color: #594b3c; margin-bottom: 26px; }
body.page-inner.album-site :is(.ask-form,.pet-auth__form) { margin-top: 22px; }
body.page-inner.album-site :is(.ask-form,.setup-form,.pet-auth__form) :is(input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]),textarea,select) {
  border: 1px solid #b7aa94; border-bottom: 3px solid #c7b596; border-radius: 5px;
  background: #fffefa; color: #413327; box-shadow: none; width: 100%; max-width: 100%;
}
body.page-inner.album-site :is(input,textarea,select):focus-visible {
  outline: 3px solid var(--chapter-ink); outline-offset: 3px;
}
body.page-inner.album-site .difficulty-field { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; background: #fff9e6; border: 1px dashed #b7aa94; border-radius: 5px; }
body.page-inner.album-site .difficulty-field legend { padding-inline: 6px; }
body.page-inner.album-site .difficulty-field .radio-row { flex: 1 1 110px; display: flex; gap: 8px; padding: 9px 12px; margin: 0; background: #fffefa; border: 1px solid #d9cdb8; border-radius: 4px; }
body.page-inner.album-site .difficulty-field .radio-row:has(input:checked) { background: var(--chapter-soft); border-color: var(--chapter-ink); }
body.page-inner.album-site input[type="radio"] { accent-color: var(--chapter-ink); width: 18px; height: 18px; flex-shrink: 0; }
body.page-inner.album-site :is(.btn-primary,.btn-north) {
  background: var(--chapter-ink); font-family: 'Jost',system-ui,sans-serif !important;
  font-size: 17px !important; font-weight: 500; color: #fff; border-radius: 5px 8px 5px 8px;
  min-height: 50px; padding: 12px 22px; transform: rotate(-.6deg); box-shadow: 0 4px 0 #44312026;
}
body.page-inner.album-site :is(.btn-primary,.btn-north):hover { background: var(--chapter-ink); filter: brightness(.94); transform: translateY(-2px); }
body.page-inner.album-site :is(.btn-ghost,.btn-secondary,.btn-pet) { font-family: 'Jost',system-ui,sans-serif !important; font-size: 16px !important; min-height: 44px; }
body.page-inner.album-site .answer-box { background: #fffefa; border: 1px dashed #c6b393; border-radius: 5px; padding: 22px; }
body.page-inner.album-site .pet-card--gate { max-width: 940px; }
body.page-inner.album-site .pet-auth__col { background: #ffffff66; border: 1px solid #d6c9ad; border-radius: 6px; padding: 22px; }
body.page-inner.album-site .pet-auth__col:first-child { background: #edf2dfaa; transform: rotate(-.3deg); }
body.page-inner.album-site .pet-auth__col:last-child { background: #fff3d8aa; transform: rotate(.3deg); }
body.page-inner.album-site .pet-auth__form { background: transparent; border: 0; box-shadow: none; padding: 0; margin-top: 0; }
body.page-inner.album-site .pet-gate-meta { padding: 12px 16px; border-left: 4px solid #90a57c; background: #edf2df; border-radius: 3px; }
body.page-inner.album-site .book-card { background: #fffefa; border-color: #d6c9ad; border-radius: 5px; }
body.page-inner.album-site .book-card__title { color: #59402c; }
body.page-inner.album-site .desk-keeper { display: none; }
body.page-inner.album-site .site-footer { padding: 26px 24px; color: #64533f; }
@media (max-width: 680px) {
  body.page-inner.album-site .inner-card--north { padding: 28px 22px; margin-top: 22px; border-left-width: 5px; background-image: linear-gradient(#fffbefcc,#fffbefcc),var(--paper-fibers); }
  body.page-inner.album-site .album-page-sticker { width: 82px; height: 82px; right: 12px; top: 22px; }
  body.page-inner.album-site .inner-card:has(.album-page-sticker) > :is(.page-eyebrow,.page-title) { max-width: calc(100% - 70px); }
  body.page-inner.album-site .inner-card:has(.album-page-sticker) > .lead { max-width: 100%; }
  body.page-inner.album-site .page-title { font-size: 40px !important; }
  body.page-inner.album-site .page-eyebrow { font-size: 20px !important; }
  body.page-inner.album-site .pet-auth__col { padding: 18px; transform: none !important; }
  body.page-inner.album-site .difficulty-field .radio-row { flex-basis: 100%; }
}
@media (max-width: 360px) {
  body.page-inner.album-site .inner-card--north { padding: 24px 18px; }
  body.page-inner.album-site .album-page-sticker { width: 54px; height: 54px; right: 12px; top: 14px; }
  body.page-inner.album-site .inner-card:has(.album-page-sticker) > .page-title { max-width: 100%; font-size: 36px !important; margin-top: 16px; }
  body.page-inner.album-site .inner-card:has(.album-page-sticker) > .page-eyebrow { max-width: calc(100% - 46px); font-size: 18px !important; }
}
@media print {
  body.page-inner.album-site .inner-card--north { background: #fff; box-shadow: none; border: 0; max-width: none; padding: 0; }
  body.page-inner.album-site .inner-card--north::before, .album-page-sticker { display: none !important; }
}