@layer pages {
  .masthead { max-width: 40rem; margin-bottom: calc(var(--space) * 3); }

  .masthead__title {
    font-size: var(--step-4);
    letter-spacing: -0.02em;
    margin-bottom: var(--space);
  }

  .masthead__lede { font-size: var(--step-1); line-height: 1.45; color: var(--ink-soft); }

  .entries { display: grid; gap: calc(var(--space) * 4); max-width: 68rem; }

  .entry {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: calc(var(--space) * 2);
    align-items: start;
  }

  .entry:nth-child(even) .entry__cutout { order: 2; transform: rotate(1.2deg); }
  .entry__cutout { display: block; transform: rotate(-1.2deg); }
  .entry__cutout:hover { transform: rotate(0deg); }

  .entry__cutout { position: relative; box-shadow: 0 14px 24px -14px rgba(30, 42, 74, 0.55); }
  .entry__cutout::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 50%;
    width: 110px;
    height: 28px;
    margin-left: -55px;
    background: var(--tape);
    transform: rotate(-3deg);
    z-index: 1;
  }

  .entry__notes { max-width: 34rem; padding-top: var(--space); }
  .entry__notes > * + * { margin-top: 0.9rem; }
  .entry__title { font-size: var(--step-2); }
  .entry__title a { text-decoration: none; }
  .entry__concept { font-style: italic; color: var(--margin-red); }

  .colophon {
    max-width: 40rem;
    margin-top: calc(var(--space) * 4);
    font-size: var(--step--1);
    color: var(--ink-soft);
  }

  .crumbs { margin-bottom: var(--space); font-size: var(--step--1); }

  .play {
    display: grid;
    grid-template-columns: minmax(0, 960px) minmax(14rem, 20rem);
    grid-template-areas: "header header" "stage margin";
    gap: calc(var(--space) * 1.5) calc(var(--space) * 2);
    align-items: start;
  }

  .play__header { grid-area: header; max-width: 46rem; }
  .play__title { font-size: var(--step-4); letter-spacing: -0.02em; margin-bottom: 0.6rem; }
  .play__goal { font-size: var(--step-1); line-height: 1.45; color: var(--ink-soft); }

  .play__stage { grid-area: stage; margin-top: 0.5rem; }
  .play__canvas { width: 100%; aspect-ratio: 960 / 600; cursor: crosshair; }

  .play__margin { grid-area: margin; display: grid; gap: calc(var(--space) * 1.6); font-size: var(--step--1); }
  .play__margin h2 { font-size: var(--step-1); margin-bottom: 0.7rem; }

  /* Teclas: se hunden cuando el jugador las usa en el canvas. */
  .keys { display: grid; gap: 0.55rem; }
  .keys__item { display: flex; align-items: center; gap: 0.75rem; }

  .keycap {
    min-width: 5.8rem;
    padding: 0.3rem 0.6rem 0.4rem;
    border: 2px solid var(--ink);
    border-bottom-width: 5px;
    background: #fff;
    font-family: var(--font-book);
    font-size: var(--step--1);
    font-weight: 700;
    text-align: center;
    transition: transform 80ms ease-out, border-bottom-width 80ms ease-out, background 200ms;
  }

  .keys__item.is-pressed .keycap { animation: press 420ms ease-out; }

  @keyframes press {
    0% { transform: translateY(3px); border-bottom-width: 2px; background: var(--tape); }
    100% { transform: none; border-bottom-width: 5px; background: #fff; }
  }

  /* Tira de viñetas. */
  .story__panel { margin: 0; }
  .story__panel figcaption { margin-top: 0.6rem; font-size: var(--step-0); line-height: 1.4; min-height: 2.8em; }
  .panel-art { width: 100%; height: auto; border: 2px solid var(--ink); }
  .panel-art--pixel { image-rendering: pixelated; }

  .story__panel:not([hidden]) .panel-art__drop { animation: drop 600ms cubic-bezier(.2, .8, .3, 1.2) both; }
  .story__panel:not([hidden]) .panel-art__escape { animation: escape 900ms ease-out both; }
  .story__panel:not([hidden]) .panel-art__grow { transform-origin: bottom; animation: grow 700ms cubic-bezier(.2, .8, .3, 1.1) both; }
  .story__panel:not([hidden]) .panel-art__shake { animation: shake 500ms ease-in-out 2 both; transform-box: fill-box; }

  @keyframes drop { from { transform: translateY(-40px); opacity: 0; } }
  @keyframes escape { from { transform: translateX(40px); opacity: 0; } }
  @keyframes grow { from { transform: scaleY(0.1); } }
  @keyframes shake { 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }

  .story__nav { display: flex; align-items: center; justify-content: space-between; margin-top: 0.6rem; }
  .story__button {
    padding: 0.35rem 0.8rem;
    border: 2px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    font: 700 var(--step--1) var(--font-book);
    cursor: pointer;
  }
  .story__button:hover { background: var(--margin-red); border-color: var(--margin-red); }
  .story__button:disabled { background: transparent; color: var(--ink-soft); border-color: var(--grid); cursor: default; }
  .story__dots { display: flex; gap: 0.4rem; }
  .story__dots i { width: 0.55rem; height: 0.55rem; border: 2px solid var(--ink); }
  .story__dots i.is-current { background: var(--margin-red); border-color: var(--margin-red); }

  /* Piezas del juego que se abren al tocarlas. */
  .pieces { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .piece { border: 2px solid var(--ink); background: #fff; }
  .piece[open] { flex-basis: 100%; }
  .piece summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.6rem 0.3rem 0.3rem; cursor: pointer; list-style: none; font-weight: 700; }
  .piece summary::-webkit-details-marker { display: none; }
  .piece p { padding: 0 0.7rem 0.6rem 2.6rem; animation: reveal 250ms ease-out; }
  .swatch { width: 28px; height: 28px; flex: none; }

  @keyframes reveal { from { opacity: 0; transform: translateY(-4px); } }

  @media (max-width: 1100px) {
    .play { grid-template-columns: minmax(0, 1fr); grid-template-areas: "header" "stage" "margin"; }
    .play__margin { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
  }

  @media (max-width: 760px) {
    .entry { grid-template-columns: minmax(0, 1fr); }
    .entry:nth-child(even) .entry__cutout { order: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .entry__cutout, .entry:nth-child(even) .entry__cutout { transform: none; }
    .story__panel *, .keys__item.is-pressed .keycap, .piece p { animation: none !important; }
  }
}