:root {
  color-scheme: light;
  --paper: #f7f5ef;
  --ink: #202947;
  --muted: #4c5362;
  --rule: #deddd7;
  font-family: system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
body { margin: 0; }
.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }
.top-bar { border-bottom: 1px solid var(--rule); }
.association { display: flex; align-items: center; gap: 13px; min-height: 76px; font-weight: 650; }
.association img { display: block; object-fit: contain; }
.preorder {
  display: inline-flex; align-items: center; gap: 16px; justify-self: start;
  padding: 16px 22px; border-radius: 8px; background: var(--ink); color: white;
  text-decoration: none; font-size: 1.1rem; font-weight: 700;
}
.preorder [aria-hidden="true"] { font-size: 1.35em; line-height: 1; }
.preorder[aria-disabled="true"] { cursor: default; }
.preorder[href]:hover { background: #364574; }
.intro-body { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px; }
.intro { padding-block: clamp(42px, 7vw, 84px) 40px; }
h1, h2 { margin: 0; }
h1 { font-size: clamp(1.95rem, 5.6vw, 4.25rem); line-height: 1.08; letter-spacing: -.055em; }
h1 span { display: inline-block; }
.title-accent { color: #ae4429; }
.intro p { max-width: 65ch; color: var(--muted); font-size: 1rem; line-height: 1.65; margin: 14px 0 0; }
.intro p:first-of-type { margin-top: 23px; }
.collection { border-top: 1px solid var(--rule); padding-block: 26px 30px; }
.collection-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -.035em; }
.controls { display: flex; gap: 8px; }
.controls button {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 50%; border: 1px solid #a2a7b3; background: transparent;
  color: var(--ink); cursor: pointer; font: inherit; font-size: 1.25rem;
}
.controls button:hover:not(:disabled) { background: var(--ink); color: white; }
.controls button:disabled { opacity: .3; cursor: default; }
:focus-visible { outline: 2px solid #4b64a0; outline-offset: 3px; }
.track {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 24px 8px 23px; margin-inline: -8px; scroll-padding-inline: 8px;
  scrollbar-width: thin; scrollbar-color: #aeb1ba transparent;
}
.card {
  margin: 0;
  flex: 0 0 clamp(128px, 23vw, 195px);
  padding: 5px 15px 11px 5px; scroll-snap-align: start;
  perspective: 680px;
}
.card figcaption {
  margin-top: 16px; text-align: center; font-size: .9rem; font-weight: 600; line-height: 1.35;
}
.fold {
  position: relative; width: 100%; aspect-ratio: 5 / 7;
  transform-style: preserve-3d; transform: rotateY(-8deg);
}
.back, .front {
  position: absolute; inset: 0; transform-origin: left center;
  border-radius: 1px; box-shadow: 3px 7px 13px #24263029;
}
.back { background: #fffdf6; transform: rotateY(4deg); }
.front {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform: rotateY(-23deg); backface-visibility: hidden;
}
@media (max-width: 480px) {
  .wrap { width: calc(100% - 32px); }
  .track { gap: 10px; }
  .association { min-height: 65px; font-size: .92rem; }
}
@media (max-width: 720px) {
  .intro-body { grid-template-columns: 1fr; gap: 22px; }
}