/* THE OBJECT: surface, book, page edges, page-turn controls, contents.
   Palette sampled from the cover PDF. */
:root {
  --violet: #9300d8;
  --magenta: #ff00f0;
  --cyan: #36c3fb;
  --yellow: #fff200;
  --backdrop: #dfe4ea;      /* the seamless behind her in the cover photo */
  --ink: #14121a;
  --paper: #fff;
  --surface: #c3cad3;
  --sans: "Archivo", "Arial Narrow", Arial, sans-serif;
  --round: "Nunito", "Arial Rounded MT Bold", Arial, sans-serif;
  --marker: "Permanent Marker", "Comic Sans MS", cursive;
  --serif: Georgia, "Times New Roman", serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden; color: var(--ink); font-family: var(--sans);
  background: radial-gradient(120% 90% at 50% 40%, #d3d9e0 0%, var(--surface) 60%, #aeb6c1 100%);
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; }

main {
  height: 100vh; height: 100dvh; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; touch-action: pan-y pinch-zoom; }

/* The closed magazine sits centred; open it shows the full spread. */
#book-pos { position: relative; transition: transform .7s cubic-bezier(.3,.7,.2,1); --progress: 0; }
#stage.is-spread #book-pos[data-state="front"] { transform: translateX(calc(var(--page-w) * -.5)); }
#stage.is-spread #book-pos[data-state="back"] { transform: translateX(calc(var(--page-w) * .5)); }

/* Page edges: the stack of paper still to read (right) and already read (left). */
#book-pos::before, #book-pos::after {
  content: ""; position: absolute; top: 4px; bottom: 4px; pointer-events: none;
  background: repeating-linear-gradient(90deg, #fbfbfb 0 1px, #cfd4da 1px 2px);
  box-shadow: 0 6px 14px #0002;
}
#book-pos::after { right: 0; width: calc((1 - var(--progress)) * 7px); transform: translateX(100%); border-radius: 0 2px 2px 0; }
#book-pos::before { left: 0; width: calc(var(--progress) * 7px); transform: translateX(-100%); border-radius: 2px 0 0 2px; }
#stage:not(.is-spread) #book-pos::before { display: none; }
#stage.is-spread #book-pos[data-state="front"]::before { display: none; }
#stage.is-spread #book-pos[data-state="back"]::after { display: none; }
#stage.is-spread #book-pos[data-state="front"]::after,
#stage.is-spread #book-pos[data-state="back"]::before { width: 0; }

.book { filter: drop-shadow(0 10px 22px #10183033) drop-shadow(0 2px 3px #10183026); }
.page { background: var(--paper); }
.page[data-density="hard"] { background: var(--violet); }

/* Opening hint, only on the closed cover. */
.hint {
  position: absolute; z-index: 5; bottom: 10px; left: 50%; transform: translateX(-50%) rotate(-4deg);
  border: 0; background: var(--yellow); color: var(--magenta); font: 18px/1 var(--marker);
  padding: 9px 14px 8px; box-shadow: 3px 3px 0 var(--violet); min-height: 44px;
  animation: nudge 1.6s ease-in-out infinite;
}
@media (min-width: 900px) { .hint { bottom: auto; top: 58%; left: calc(50% + var(--page-w, 300px) / 2 + 22px); transform: rotate(-6deg); } }
@keyframes nudge { 50% { translate: 6px 0; } }

/* Under-the-magazine bar: sticker buttons. ‹ page › and SÍGUELA ♡ (links) */
.strip { flex-shrink: 0; display: flex; justify-content: center; align-items: center; gap: 10px; height: 78px; padding: 0 10px 8px; }
.strip button { border: 0; min-height: 44px; transition: translate .1s, box-shadow .1s; }
.strip button:active:not(:disabled) { translate: 2px 2px; box-shadow: 1px 1px 0 var(--violet) !important; }
.nav-arrow {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; background: var(--magenta); color: var(--yellow);
  display: grid; place-items: center; padding: 0; box-shadow: 3px 3px 0 var(--violet);
}
.nav-arrow svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
#prev { rotate: -8deg; } #next { rotate: 8deg; }
.nav-arrow:disabled { background: #d9dde3; color: #fff; box-shadow: none; cursor: default; }
.nav-counter {
  display: grid; justify-items: center; gap: 2px; min-width: 0; max-width: 150px; padding: 6px 12px 7px;
  background: var(--violet); color: #fff; rotate: -2deg; box-shadow: 3px 3px 0 var(--magenta);
}
.nav-num { display: flex; align-items: baseline; gap: 3px; }
.nav-num small { font: 800 11px/1 var(--sans); font-stretch: 62%; letter-spacing: .06em; }
.nav-num b { font: 900 24px/1 var(--round); color: var(--yellow); }
#counter-t { max-width: 126px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 11px/1.1 var(--marker); font-style: normal; color: #ffd6fb; }
.nav-siguela {
  flex-shrink: 0; padding: 0 14px; height: 48px; background: var(--yellow); color: var(--magenta); rotate: 4deg;
  font: 900 16px/1 var(--round); letter-spacing: .02em; box-shadow: 3px 3px 0 var(--violet);
  outline: 2px dashed var(--magenta); outline-offset: -6px;
}
.nav-siguela span { display: inline-block; animation: beat 1.2s ease-in-out infinite; }
@keyframes beat { 0%, 60%, 100% { scale: 1; } 30% { scale: 1.35; } }
@media (max-width: 370px) { .strip { gap: 7px; } .nav-siguela { padding: 0 10px; font-size: 14px; } #counter-t { max-width: 100px; } }

dialog#contents {
  border: 0; padding: 0; width: min(340px, calc(100% - 32px)); background: #fff; color: var(--ink);
  box-shadow: 6px 6px 0 var(--magenta);
}
dialog#contents::backdrop { background: #1b103066; }
#contents header { display: flex; justify-content: space-between; align-items: center; background: var(--violet); color: var(--yellow); padding: 0 0 0 14px; }
#contents h2 { margin: 0; font: 900 22px/1 var(--sans); font-stretch: 62%; letter-spacing: .02em; }
#contents-close { border: 0; background: none; color: #fff; width: 48px; height: 48px; font-size: 28px; }
#contents ol { list-style: none; margin: 0; padding: 6px 0; }
#contents li button { display: flex; gap: 12px; align-items: baseline; width: 100%; min-height: 46px; padding: 8px 14px; border: 0; background: none; text-align: left; }
#contents li button:hover { background: var(--yellow); }
#contents li b { font: 900 20px/1 var(--round); color: var(--magenta); min-width: 36px; }
#contents li span { font: 600 15px/1.2 var(--sans); font-stretch: 80%; text-transform: uppercase; }
#contents p { margin: 0; padding: 10px 14px 12px; border-top: 2px solid var(--violet); font: 500 11px/1.5 var(--sans); font-stretch: 70%; letter-spacing: .06em; text-transform: uppercase; }
.noscript { padding: 20px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}