/* Folded parchment cover, inked paper and the family's wandering name ribbons. */
body { background: #30251e; }
#mha-familienkarte {
  --mha-paper: #e9d6ac;
  --mha-light: #f6e9c9;
  --mha-ink: #3c2922;
  --mha-wine: #71313a;
  --mha-decor: .36;
  background: radial-gradient(ellipse at 49% 24%, #f8edce80, transparent 60%), var(--mha-paper);
  box-shadow: inset 0 0 100px #8e65362e, 0 12px 80px #140d0960;
}
#mha-familienkarte .mha-frame { border-radius: 1px; border-color: #80633d8c; grid-template-rows: auto auto 1fr auto; }
#mha-familienkarte .mha-sidebar, #mha-familienkarte .mha-main { grid-row: 3; }
#mha-familienkarte .mha-footnote { grid-row: 4; }
#mha-familienkarte .mha-hand-drawing { opacity: .15; }
#mha-familienkarte .mha-frame::before { border-radius: 0; }
#mha-familienkarte .mha-masthead { border-bottom: 3px double #95704465; }
#mha-familienkarte .mha-monogram { background: none; border: 0; min-height: 44px; padding: 0; }
#mha-familienkarte .mha-monogram:hover { color: var(--mha-wine); }
#mha-familienkarte :focus-visible { outline: 2px solid var(--mha-wine); outline-offset: 5px; }
#mha-familienkarte .mha-main { position: relative; perspective: 1600px; }
#mha-familienkarte .mha-note,
#mha-familienkarte .mha-shelf,
#mha-familienkarte .mha-recipe,
#mha-familienkarte .mha-rank-row { border-radius: 2px 5px 2px 4px; background: #f5e9cbd9; border-color: #9a7a493d; box-shadow: 1px 3px 0 #a58c6320; }
#mha-familienkarte .mha-button,
#mha-familienkarte .mha-icon-button,
#mha-familienkarte .mha-select,
#mha-familienkarte .mha-input,
#mha-familienkarte .mha-nav button { border-radius: 3px; }
#mha-familienkarte .mha-calendar { border-radius: 2px; }
#mha-familienkarte .mha-event { border-radius: 2px 5px 3px 1px; }
#mha-familienkarte .mha-dialog { border-radius: 3px; background: #f3e4c2; }
#mha-familienkarte .mha-entry-layout { min-height: 440px; }
#mha-familienkarte .mha-entry-title { font-family: 'IM Fell English', Georgia, serif; }

/* A real two-leaf gatefold: each half carries exactly half of the same drawing. */
#mha-familienkarte .mha-cover-stage {
  position: fixed; inset: 0; z-index: 30; overflow-x: hidden; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) 24px max(22px, env(safe-area-inset-bottom));
  color: #e5cda0;
  background: radial-gradient(ellipse at 50% 43%, #70533638, transparent 65%),
    repeating-linear-gradient(93deg, #ffffff01 0 1px, transparent 1px 7px), #30251e;
  perspective: 1800px;
}
#mha-familienkarte .mha-cover-heading { font: 13px 'IM Fell English SC', Georgia, serif; letter-spacing: .25em; text-transform: uppercase; margin-bottom: 20px; text-align: center; }
#mha-familienkarte .mha-cover-book {
  width: min(440px, 69vh, 78vw); width: min(440px, 62dvh, 78vw); aspect-ratio: 2 / 3;
  position: relative; flex-shrink: 0; transform: rotate(-1deg);
  filter: drop-shadow(7px 17px 18px #100b0980); perspective: 1500px;
}
#mha-familienkarte .mha-cover-book::before {
  content: ''; position: absolute; inset: 3px -3px -4px 2px; border: 1px solid #997642;
  background: #d5bd88 url('/assets/images/family-map-interior.svg') center / 100% 100%; transform: rotate(.5deg);
  box-shadow: 2px 2px 0 #b79a64, 4px 4px 0 #80603d;
}
#mha-familienkarte .mha-cover-leaf { position: absolute; top: 0; width: 50%; height: 100%; background-image: url('/assets/images/family-map-cover.svg'); background-size: 200% 100%; backface-visibility: visible; transform-style: preserve-3d; }
#mha-familienkarte .mha-cover-leaf::before { content: ''; position: absolute; inset: 0; background: #d8be86 url('/assets/images/family-map-interior.svg') center / 200% 100%; transform: rotateY(180deg) translateZ(.5px); backface-visibility: hidden; }
#mha-familienkarte .mha-cover-left { left: 0; background-position: left; transform-origin: left center; }
#mha-familienkarte .mha-cover-right { right: 0; background-position: right; transform-origin: right center; }
#mha-familienkarte .mha-cover-leaf::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 75%, #40281121); pointer-events: none; }
#mha-familienkarte .mha-cover-right::after { background: linear-gradient(90deg, #3c281b35, transparent 12%, #fff5d211 93%, #6c4d2c40); }
#mha-familienkarte .mha-cover-controls { text-align: center; position: relative; margin-top: 24px; max-width: 100%; }
#mha-familienkarte .mha-cover-open { min-height: 48px; border: 1px solid #c9a571; background: #d8bc83; color: #38251f; padding: 13px 31px; font: 18px 'IM Fell English', Georgia, serif; box-shadow: inset 0 0 0 3px #d8bc83, inset 0 0 0 4px #6e4b3640; letter-spacing: .025em; display: inline-flex; align-items: center; gap: 18px; }
#mha-familienkarte .mha-cover-open:hover { background: #ecd4a0; transform: translateY(-2px); }
#mha-familienkarte .mha-cover-open:focus-visible { outline-color: #f4dfb6; }
#mha-familienkarte .mha-cover-household { font: italic 15px 'IM Fell English', Georgia, serif; letter-spacing: .035em; margin-top: 13px; color: #c7ac86; overflow-wrap: anywhere; }
#mha-familienkarte[data-cover='closed'] { height: 100dvh; min-height: 0; overflow: hidden; }
#mha-familienkarte[data-cover='closed'] > .mha-frame { visibility: hidden; }
#mha-familienkarte[data-cover='opening'] .mha-cover-stage { animation: mha-cover-reveal 1.05s both; pointer-events: none; }
#mha-familienkarte[data-cover='opening'] .mha-cover-left { animation: mha-open-left 1.05s cubic-bezier(.3,.05,.2,1) both; }
#mha-familienkarte[data-cover='opening'] .mha-cover-right { animation: mha-open-right 1.05s cubic-bezier(.3,.05,.2,1) both; }
#mha-familienkarte[data-cover='opening'] .mha-cover-book { animation: mha-expand-map 1.05s ease both; }
#mha-familienkarte[data-cover='opening'] .mha-cover-controls,
#mha-familienkarte[data-cover='opening'] .mha-cover-heading { opacity: 0; transition: opacity .15s; }
#mha-familienkarte[data-cover='opening'] > .mha-frame { animation: mha-inner-reveal 1.05s both; }
#mha-familienkarte[data-cover='closing'] .mha-cover-left { animation: mha-open-left .85s reverse both; }
#mha-familienkarte[data-cover='closing'] .mha-cover-right { animation: mha-open-right .85s reverse both; }
#mha-familienkarte[data-cover='closing'] .mha-cover-stage { animation: mha-cover-reveal .85s reverse both; }
#mha-familienkarte[data-cover='closing'] .mha-cover-controls,
#mha-familienkarte[data-cover='closing'] .mha-cover-heading { animation: mha-inner-reveal .85s both; }
@keyframes mha-open-left { to { transform: rotateY(-155deg); filter: brightness(.68); } }
@keyframes mha-open-right { to { transform: rotateY(155deg); filter: brightness(.77); } }
@keyframes mha-expand-map { to { transform: rotate(0) scale(1.35); } }
@keyframes mha-cover-reveal { 0%,35% { opacity: 1; } 100% { opacity: 0; } }
@keyframes mha-inner-reveal { 0%,30% { opacity: 0; } 100% { opacity: 1; } }

/* A quiet corridor keeps the little walkers visible without covering controls. */
#mha-familienkarte .mha-map-passage {
  grid-column: 1 / -1; position: relative; height: var(--passage-height, 127px); min-width: 0;
  background: linear-gradient(90deg, #cfb37b18, #f8edcf54 45%, #c5a26815);
  border-bottom: 3px double #95704455; overflow: hidden;
}
#mha-familienkarte .mha-passage-caption { position: absolute; top: 7px; left: 24px; font: 10px 'IM Fell English SC', Georgia, serif; letter-spacing: .18em; color: #765739; }
#mha-familienkarte .mha-passage-ink { position: absolute; inset: 0; width: 100%; height: 100%; color: #896438; opacity: .23; }
#mha-familienkarte .mha-wanderers { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; border-radius: 0; }
#mha-familienkarte .mha-shoe-print { fill: #3e2924; }
#mha-familienkarte .mha-ribbon-tail { fill: #ad895b; stroke: #65472f; stroke-width: .7; }
#mha-familienkarte .mha-ribbon-face { fill: #f0dcae; stroke: #755333; stroke-width: .8; }
#mha-familienkarte .mha-ribbon-crease { fill: #8b623e; stroke: #755333; stroke-width: .6; }
#mha-familienkarte .mha-name-ribbon text { font-family: 'IM Fell English', Georgia, serif; font-style: italic; fill: #442f24; }
#mha-familienkarte .mha-turning-leaf {
  position: absolute; inset: 0; z-index: 12; pointer-events: none; transform-origin: left center;
  background: linear-gradient(90deg, #95704466, transparent 4%, #fff4d266 47%, #88623c47 99%), #e9d5a8;
  border: 1px solid #907046; box-shadow: 12px 10px 30px #422b2335; backface-visibility: visible;
  display: grid; place-content: center; overflow: hidden;
}
#mha-familienkarte .mha-turning-leaf::before { content: ''; position: absolute; inset: 14px; border: 3px double #94714466; background: url('/assets/images/family-map-cover.svg') center / auto 160% no-repeat; opacity: .13; }
#mha-familienkarte .mha-turning-leaf span { font: italic 30px 'IM Fell English', Georgia, serif; color: #795439; }
@media (max-width: 850px) {
  #mha-familienkarte .mha-frame { grid-template-rows: auto auto auto 1fr auto; }
  #mha-familienkarte .mha-main { grid-row: 4; }
  #mha-familienkarte .mha-footnote { grid-row: 5; }
}
@media (max-width: 560px) {
  #mha-familienkarte { --mha-decor: .2; }
  #mha-familienkarte .mha-hand-drawing { display: none; }
  #mha-familienkarte .mha-cover-stage { padding: 20px 16px; }
  #mha-familienkarte .mha-cover-book { width: min(340px, 57dvh, 84vw); }
  #mha-familienkarte .mha-cover-heading { font-size: 10px; letter-spacing: .19em; margin-bottom: 17px; }
  #mha-familienkarte .mha-cover-controls { margin-top: 22px; }
  #mha-familienkarte .mha-cover-household { font-size: 13px; }
  #mha-familienkarte .mha-passage-caption { left: 14px; font-size: 9px; }
  #mha-familienkarte .mha-entry-layout { min-height: 0; }
}
@media (max-height: 530px) and (min-width: 561px) {
  #mha-familienkarte .mha-cover-stage { flex-direction: row; gap: 35px; }
  #mha-familienkarte .mha-cover-heading { display: none; }
  #mha-familienkarte .mha-cover-book { width: min(280px, 58dvh); }
  #mha-familienkarte .mha-cover-controls { max-width: 220px; margin: 0; }
}