/* Moment Collector's page: the lamp-lit room with the tape shelf. Colors come from the room (see memory-dioramas/CLAUDE.md).
   The one bold thing is the camcorder screen with its PLAY and date stamp; everything else stays quiet and warm. */
:root {
  --dusk: #171629; --dusk2: #201e38; --lamp: #ffd9a0; --lamp-deep: #e9a955; --paper: #f6efdc; --ink: #26244f;
  --redpen: #8a3a3a; --velvet: #36564e; --walnut: #5b3c28; --text: #efe6d2; --muted: #b9b0c9;
  --serif: "Outfit", system-ui, sans-serif; --hand: "Caveat", cursive; --vcr: "VT323", monospace; --sans: "DM Sans", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--dusk); color: var(--text); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden;
  /* the wall: faint vertical paper stripes and the lamp's warmth from the upper left */
  background-image: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(255, 190, 110, 0.13), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 26px); }
a { color: var(--lamp); }
a:focus-visible, button:focus-visible, video:focus-visible { outline: 3px solid var(--lamp); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); color: var(--ink); padding: 8px 14px; border-radius: 6px; z-index: 10; }
.skip:focus { left: 16px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; margin: 0; color: #fff4e2; }
h2 { font-size: clamp(34px, 5vw, 54px); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
section { padding: clamp(56px, 9vw, 110px) 0; }
.sub { color: var(--muted); max-width: 62ch; margin: 14px 0 0; }

/* the Moment Collector bar, under the site bar */
.mcbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; max-width: 1120px; margin: 0 auto; padding: 22px 20px; }
.mark { display: inline-flex; align-items: center; gap: 12px; font: 600 20px var(--serif); letter-spacing: -0.01em; color: #fff4e2; text-decoration: none; }
.mark .tape { position: relative; width: 38px; height: 25px; border-radius: 4px; background: #1d1b27; box-shadow: inset 0 0 0 2px #3b3850; }
.mark .tape::before { content: ''; position: absolute; left: 4px; right: 4px; top: 4px; height: 7px; border-radius: 2px; background: var(--paper); }
.mark .tape i { position: absolute; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--lamp-deep); }
.mark .tape i:first-child { left: 9px; } .mark .tape i:last-child { right: 9px; }
.mark:hover .tape i { transform: rotate(180deg); transition: transform 0.6s; }
.top__demo { font: 500 15px var(--sans); color: var(--lamp); text-decoration: none; border-bottom: 1px solid rgba(255, 217, 160, 0.4); padding-bottom: 2px; }
.top__demo:hover { border-color: var(--lamp); }

/* the opening */
.hero { padding: clamp(24px, 6vw, 70px) 20px clamp(26px, 4vw, 40px); max-width: 1120px; margin: 0 auto; }
.hero h1 { font-size: clamp(38px, 6.4vw, 78px); max-width: 14ch; }
/* the neon sign: a glowing coral script over spaced gold capitals, flickering on once as the page opens */
.sign { margin: 0 0 clamp(18px, 3vw, 30px); display: inline-flex; flex-direction: column; align-items: center; }
.sign__neon { font: 400 clamp(72px, 12vw, 150px)/0.85 "Yellowtail", cursive; color: #fff0e6; transform: rotate(-5deg); margin-bottom: clamp(-4px, -0.4vw, 0px);
  text-shadow: 0 0 2px #fff, 0 0 8px #ff6a5a, 0 0 20px #ff6a5a, 0 0 46px rgba(255, 106, 90, 0.7), 0 0 90px rgba(255, 92, 154, 0.4); animation: neonOn 1.6s steps(1) both; }
.sign__gold { font: 600 clamp(22px, 3.4vw, 42px)/1 "Outfit", sans-serif; letter-spacing: 0.36em; margin-right: -0.36em;
  background: linear-gradient(100deg, #b98a3c 0%, #f7e3a3 30%, #fff8e4 42%, #e7c477 55%, #b98a3c 80%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(247, 200, 120, 0.35)); }
@keyframes neonOn { 0% { opacity: 0.15; } 12% { opacity: 1; } 18% { opacity: 0.3; } 26% { opacity: 1; } 34% { opacity: 0.55; } 40%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sign__neon { animation: none; } }
.lede { font: 400 clamp(18px, 2vw, 22px)/1.55 var(--serif); color: #e9dfcb; max-width: 40ch; margin: 22px 0 0; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 50px; padding: 10px 26px; border-radius: 999px; font: 600 16px var(--sans); text-decoration: none; transition: transform 0.15s, box-shadow 0.25s, background 0.25s; }
.btn--lamp { background: radial-gradient(circle at 30% 20%, #fff0d2, var(--lamp) 45%, var(--lamp-deep)); color: #2a1d10; box-shadow: 0 0 0 1px rgba(255, 230, 190, 0.6) inset, 0 8px 26px rgba(233, 169, 85, 0.35); }
.btn--lamp:hover { box-shadow: 0 0 0 1px rgba(255, 240, 210, 0.9) inset, 0 10px 40px rgba(255, 200, 120, 0.6); transform: translateY(-1px); }
.btn--ghost { color: var(--lamp); box-shadow: 0 0 0 1.5px rgba(255, 217, 160, 0.5) inset; }
.btn--ghost:hover { background: rgba(255, 217, 160, 0.08); box-shadow: 0 0 0 1.5px var(--lamp) inset; }
.btn:active { transform: translateY(1px) scale(0.98); }

/* the camcorder screen: the page's one bold thing */
.screen { padding: 0 20px clamp(40px, 7vw, 80px); }
.screen__frame { position: relative; max-width: 1120px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 120px rgba(255, 180, 100, 0.12); }
.screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
.screen__play { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; cursor: pointer; color: #fff;
  background: linear-gradient(0deg, rgba(10, 8, 20, 0.55), transparent 45%), radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.35)); }
.screen__play[hidden] { display: none; }
.osd { font-family: var(--vcr); letter-spacing: 0.04em; text-shadow: 0 0 6px rgba(255, 255, 255, 0.5), 2px 0 rgba(255, 60, 60, 0.35), -2px 0 rgba(60, 160, 255, 0.35); }
.osd--mode { position: absolute; left: 4.5%; top: 6%; font-size: clamp(26px, 4.4vw, 58px); transition: transform 0.2s, text-shadow 0.2s; }
.osd--stamp { position: absolute; right: 4.5%; bottom: 7%; font-size: clamp(18px, 3vw, 40px); line-height: 1; text-align: right; }
.screen__hint { position: absolute; left: 4.5%; bottom: 7.5%; font: 500 clamp(14px, 1.6vw, 20px) var(--serif); color: #fff1d8; text-align: left; max-width: 55%; }
.screen__play:hover .osd--mode, .screen__play:focus-visible .osd--mode { transform: scale(1.06); text-shadow: 0 0 14px rgba(255, 255, 255, 0.8), 2px 0 rgba(255, 60, 60, 0.45), -2px 0 rgba(60, 160, 255, 0.45); }

/* the real one, stop by stop: snapshots with the camcorder's time */
.snaps { list-style: none; padding: 0; margin: 36px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.4vw, 26px); }
.snaps figure { position: relative; margin: 0; padding: 10px 10px 44px; background: var(--paper); border-radius: 3px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  transform: rotate(var(--r, -1deg)); transition: transform 0.3s, box-shadow 0.3s; }
.snaps li:nth-child(2n) figure { --r: 1.2deg; } .snaps li:nth-child(3n) figure { --r: -0.4deg; }
.snaps figure:hover { transform: rotate(0deg) translateY(-4px) scale(1.02); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(255, 200, 120, 0.15); }
.snaps img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.snaps .osd { position: absolute; right: 18px; top: 14px; color: #fff; font-size: 22px; }
/* the real photo each stop was built from, pinned to the snapshot's corner like a polaroid, so you see the photo became the place */
.snaps .real { position: absolute; right: -14px; bottom: 18px; width: 34%; aspect-ratio: 1; object-fit: cover; padding: 5px 5px 16px; background: #fffdf8;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45); transform: rotate(6deg); transition: transform 0.3s; z-index: 1; }
.snaps li:nth-child(2n) .real { transform: rotate(-5deg); }
.snaps figure:hover .real { transform: rotate(0deg) scale(1.12) translate(-6px, -6px); }
.snaps figcaption { position: absolute; left: 14px; bottom: 6px; font: 700 24px var(--hand); color: var(--ink); }

/* how it works: a real sequence, so it's numbered */
.how { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.025), transparent); }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 36px 0 0; display: grid; gap: 28px; max-width: 760px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; }
.steps li::before { content: counter(s); grid-row: span 2; font: 700 44px/1 var(--hand); color: var(--lamp); }
.steps b { font: 600 22px/1.25 var(--serif); color: #fff4e2; }
.steps span { color: var(--muted); }

/* made together: a note on label paper, in Chris's voice */
.paper { background: var(--paper); color: var(--ink); border-radius: 6px; padding: clamp(28px, 5vw, 56px); max-width: 860px; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
  background-image: repeating-linear-gradient(0deg, transparent 0 33px, rgba(38, 36, 79, 0.07) 33px 34px); }
.paper h2 { color: var(--ink); font-size: clamp(26px, 3.6vw, 38px); }
.paper p { font: 400 18px/1.6 var(--serif); margin: 18px 0 0; }
.paper a { color: var(--redpen); }
.paper .sig { font: 700 34px var(--hand); color: var(--redpen); margin-top: 10px; }

/* the shelf and the price */
.shelf__row { position: relative; display: flex; align-items: flex-end; gap: clamp(14px, 3vw, 34px); margin: 50px 0 0; padding: 0 0 18px; }
.shelf__row::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; border-radius: 3px; background: linear-gradient(180deg, #7a5236, var(--walnut) 60%, #3d2717);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5); }
.lamp { position: relative; flex: none; width: 70px; height: 130px; }
.lamp::before { content: ''; position: absolute; left: 6px; right: 6px; top: 0; height: 56px; clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
  background: radial-gradient(ellipse at 50% 120%, #fff1c9, #f6cf8c 45%, #d99a55); box-shadow: 0 0 60px rgba(255, 200, 120, 0.7); }
.lamp::after { content: ''; position: absolute; left: 33px; width: 4px; top: 56px; bottom: 0; background: #b08a4a; border-radius: 2px; }
.lamp { background: radial-gradient(ellipse 50% 6px at 50% 100%, #b08a4a 98%, transparent); }   /* the lamp's foot, resting on the shelf */
.tapes { display: flex; flex-wrap: wrap; gap: 12px; flex: 1; }
.cass { position: relative; width: 168px; height: 104px; padding: 10px 12px; border-radius: 7px; background: #1d1b27; box-shadow: inset 0 0 0 2px #34314a, 0 10px 20px rgba(0, 0, 0, 0.4); transition: transform 0.25s; }
.cass::after { content: ''; position: absolute; left: 50%; bottom: 12px; width: 70px; height: 20px; margin-left: -35px; border-radius: 10px; background: #0d0c14;
  box-shadow: inset 0 0 0 2px #2c2a3c; }
.cass b, .cass i { display: block; background: var(--paper); color: var(--ink); padding: 0 8px; }
.cass b { font: 700 19px/1.25 var(--hand); border-radius: 3px 3px 0 0; padding-top: 4px; }
.cass i { font: 600 18px/1.2 var(--hand); color: var(--redpen); border-radius: 0 0 3px 3px; padding-bottom: 4px; }
.cass:hover { transform: translateY(-8px); }
.cass--empty { background: transparent; box-shadow: inset 0 0 0 2px rgba(255, 217, 160, 0.35); }
.cass--empty::after { display: none; }
.cass--empty b { background: none; color: var(--lamp); font-size: 22px; padding-top: 22px; text-align: center; }
.price { flex: none; display: grid; justify-items: center; align-self: flex-start; padding: 12px 20px 14px; background: var(--paper); color: var(--ink); border-radius: 6px 30px 30px 6px;
  transform: rotate(-6deg); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45); font: 600 14px var(--sans); transition: transform 0.3s; }
.price strong { font: 800 44px/1 var(--serif); letter-spacing: -0.02em; color: var(--redpen); }
.price:hover { transform: rotate(0deg) scale(1.04); }
.fine { font-size: 14px; color: var(--muted); margin: 16px 0 0; }
.isnot { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 56px; }
.isnot h3 { font: 700 34px var(--hand); color: var(--lamp); font-family: var(--hand); }
.isnot ul { margin: 10px 0 0; padding-left: 1.1em; color: #e3d9c4; }
.isnot li { margin: 6px 0; }
.isnot li::marker { color: var(--lamp-deep); }
.isnot div + div li::marker { content: '\25CB  '; color: var(--muted); }

/* the collection: the scene's real front-screen card beside an empty one for the next moment */
.collect { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 26px; margin-top: 40px; }
.mcard { width: min(440px, 100%); border-radius: 22px; overflow: hidden; color: #fff; text-decoration: none; background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14) inset, 0 30px 60px rgba(0,0,0,0.45); transition: transform 0.3s, box-shadow 0.3s; }
.mcard:hover, .mcard:focus-visible { transform: translateY(-5px); box-shadow: 0 0 0 1px rgba(255,217,160,0.5) inset, 0 40px 80px rgba(0,0,0,0.5), 0 0 40px rgba(255,200,130,0.16); }
.mcard__thumb { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.mcard__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.mcard:hover .mcard__thumb img { transform: scale(1.05); }
.mcard__play { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,0.2); box-shadow: 0 0 0 1.5px rgba(255,255,255,0.6) inset; transition: background 0.3s, transform 0.3s; }
.mcard__play::before { content: ""; margin-left: 5px; border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.mcard:hover .mcard__play { background: rgba(255,217,160,0.9); transform: scale(1.08); }
.mcard:hover .mcard__play::before { border-left-color: #26244f; }
.mcard__text { display: block; padding: 16px 20px 20px; }
.mcard__text b { display: block; font: 600 22px/1.2 var(--serif); }
.mcard__text small { display: block; margin-top: 3px; font-size: 15px; color: rgba(246,240,227,0.7); }
.mcard__text i { display: block; margin-top: 6px; font: 700 26px/1.1 var(--hand); font-style: normal; color: var(--lamp); }
.mnext { width: min(300px, 100%); min-height: 300px; border-radius: 22px; border: 2px dashed rgba(255,217,160,0.45); display: grid; place-content: center; justify-items: center; gap: 6px; padding: 24px; text-align: center; color: var(--lamp); }
.mnext span { font: 300 64px/0.9 var(--serif); }
.mnext em { font: 700 28px/1.1 var(--hand); font-style: normal; }
.mnext strong { margin-top: 8px; font: 800 44px/1 var(--serif); letter-spacing: -0.02em; color: #fff4e2; }
.mnext small { font-size: 14px; color: var(--muted); }

/* TRY THE GAME: a lit sign across the card's photo, so nobody mistakes it for a picture */
.mcard__try { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 12px 16px; text-align: center;
  background: linear-gradient(0deg, rgba(12, 10, 28, 0.88), rgba(12, 10, 28, 0.55) 60%, transparent);
  font: 800 clamp(30px, 5.4vw, 46px)/1 var(--serif); letter-spacing: 0.06em; color: #fff0e6;
  text-shadow: 0 0 2px #fff, 0 0 8px #ff6a5a, 0 0 20px #ff6a5a, 0 0 44px rgba(255, 92, 154, 0.55); transition: text-shadow 0.3s; }
.mcard:hover .mcard__try, .mcard:focus-visible .mcard__try { text-shadow: 0 0 2px #fff, 0 0 10px #ff6a5a, 0 0 28px #ff6a5a, 0 0 70px rgba(255, 92, 154, 0.8); }
.mcard__play { margin-top: -52px; }

/* the theater: the tour plays over a dimmed page */
.theater { width: min(1180px, 94vw); max-width: none; max-height: none; padding: 0; border: 0; background: transparent; overflow: visible; }
.theater::backdrop { background: rgba(6, 5, 16, 0.86); backdrop-filter: blur(6px); }
.theater[open] { animation: theaterIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes theaterIn { from { opacity: 0; transform: scale(0.94); } }
.theater__box { position: relative; aspect-ratio: 16 / 9; max-height: 86vh; margin: 0 auto; border-radius: 16px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px rgba(255, 217, 160, 0.3), 0 40px 120px rgba(0, 0, 0, 0.7), 0 0 80px rgba(255, 170, 110, 0.12); }
.theater video { display: block; width: 100%; height: 100%; background: #000; }
.theater__close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  font: 400 30px/1 var(--sans); color: #fff; background: rgba(0, 0, 0, 0.55); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) inset; transition: background 0.2s, transform 0.2s; }
.theater__close:hover { background: var(--lamp); color: var(--ink); transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .theater[open] { animation: none; } .theater__close:hover { transform: none; } }

/* ordering */
.order { text-align: left; background: radial-gradient(ellipse 60% 80% at 20% 50%, rgba(255, 190, 110, 0.1), transparent 70%); }
.foot { padding: 34px 20px 46px; text-align: center; font-size: 14px; color: var(--muted); border-top: 1px solid rgba(255, 255, 255, 0.06); }
.foot a.sep { margin-left: 10px; }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .top__demo { display: none; }
  .snaps { grid-template-columns: 1fr 1fr; }
  .snaps figure { padding: 7px 7px 34px; } .snaps figcaption { font-size: 19px; left: 10px; } .snaps .osd { font-size: 17px; right: 12px; top: 10px; }
  .snaps .real { right: -8px; bottom: 14px; width: 38%; padding: 3px 3px 10px; }
  .screen__frame { border-radius: 12px; }
  .screen__hint { display: none; }
  .shelf__row { flex-direction: column; align-items: stretch; } .lamp { display: none; }
  .cass { width: calc(50% - 6px); }
  .price { order: -1; align-self: flex-end; transform: rotate(-4deg); margin: 0 6px 4px 0; }
  .isnot { grid-template-columns: 1fr; gap: 10px; }
}

/* who it's for: occasions as a two-column list, each with the reason in plain words */
.giftlist { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 40px; max-width: 900px; }
.giftlist li { padding-left: 22px; border-left: 2px solid rgba(255, 217, 160, 0.35); transition: border-color 0.2s ease, transform 0.2s ease; }
.giftlist li:hover { border-color: var(--lamp); transform: translateX(3px); }
.giftlist b { display: block; font: 600 22px/1.25 var(--serif); color: #fff4e2; }
.giftlist span { display: block; margin-top: 4px; color: var(--muted); }
/* questions: each one opens in place */
.faq { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.025), transparent); }
.qs { margin-top: 30px; max-width: 760px; }
.qs details { border-bottom: 1px solid rgba(255, 217, 160, 0.18); }
.qs summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; font: 600 21px/1.3 var(--serif); color: #fff4e2; }
.qs summary::-webkit-details-marker { display: none; }
.qs summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font: 400 32px/1 var(--serif); color: var(--lamp); transition: transform 0.2s ease; }
.qs details[open] summary::after { transform: rotate(45deg); }
.qs summary:hover { color: var(--lamp); }
.qs summary:focus-visible { outline: 2px solid var(--lamp); outline-offset: 4px; border-radius: 4px; }
.qs details p { margin: 0 0 20px; color: var(--muted); max-width: 62ch; }
@media (prefers-reduced-motion: reduce) { .giftlist li, .qs summary::after { transition: none; } }
@media (max-width: 720px) { .giftlist { grid-template-columns: 1fr; gap: 20px; } }

/* the other worlds, at the very bottom: proof of the craft for somebody deciding, never in the way of the order button */
.foot__more { margin: 0 0 10px; color: var(--muted); }
.foot__more a { color: var(--lamp); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 217, 160, 0.4); transition: text-decoration-color 0.2s; }
.foot__more a:hover, .foot__more a:focus-visible { text-decoration-color: var(--lamp); }

/* the screen is the door into the game: real gameplay looping behind PLAY (2026-11-10, Chris: "You need to really
   experience the game to fully get it.") The tour moved to the hero's second button. */
a.screen__play { display: block; text-decoration: none; }
.screen__note { max-width: 1120px; margin: 14px auto 0; text-align: center; font: 400 15px var(--sans); color: rgba(246, 239, 220, 0.7); }
.screen__note b { display: block; font: 600 clamp(19px, 2.2vw, 24px)/1.3 var(--serif); color: var(--lamp); margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) { .screen video { display: none; } .screen__frame { background: #000 url("play-poster.jpg") center / cover; } }

/* ---------- the Alchema Interactive site bar (Chris, 2026-11-12: "make sure the Alchema Interactive header is on it"):
   the same bar as the Shop and the Lab (site-nav.css, /tools/nav.js), set in the site's own face and yellow,
   on a strip of the site's navy so it reads as Alchema's, with Moment Collector's own bar under it ---------- */
.sitebar { --text: #eef3ff; --muted: rgba(214, 226, 255, 0.72); --yellow: #ffee00; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  max-width: none; margin: 0; padding: 14px max(20px, calc((100vw - 1120px) / 2)); background: rgba(0, 3, 15, 0.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(127, 208, 255, 0.14); position: sticky; top: 0; z-index: 30; font-family: "Inter", var(--sans); }
.sitebar .home { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-family: "Pixelify Sans", monospace; font-size: 1.05rem; white-space: nowrap; }
.sitebar .home img { width: 34px; height: auto; transition: transform 0.25s ease; }
.sitebar .home:hover img { transform: rotate(-12deg) scale(1.08); }
.sitebar .home:hover { color: var(--yellow); }
.sitebar .start { color: #00030f; background: var(--yellow); text-decoration: none; font-weight: 600; font-size: 0.92rem; padding: 0.6em 1.1em; border-radius: 999px; white-space: nowrap; transition: box-shadow 0.2s ease, transform 0.2s ease; }
.sitebar .start:hover { box-shadow: 0 0 0 4px rgba(255, 238, 0, 0.25), 0 0 24px rgba(255, 238, 0, 0.35); transform: translateY(-1px); }
.sitebar a:focus-visible, .sitebar button:focus-visible { outline-color: var(--yellow); }
.mcbar { padding: 16px 20px 0; }
.crumb { margin: 0; display: flex; align-items: center; gap: 10px; color: var(--muted); font: 500 15px var(--sans); }
.crumb > a { color: var(--muted); text-decoration: none; } .crumb > a:hover { color: var(--lamp); }

/* the hero's promise, in the neon of the sign */
.soon { margin: 14px 0 0; font: 400 clamp(34px, 4.4vw, 56px)/1 "Yellowtail", cursive; color: #ffd0e2;
  text-shadow: 0 0 4px #fff, 0 0 14px #ff5c9a, 0 0 36px #ff2f7a, 0 0 70px rgba(255, 47, 122, 0.5); }
.hero h1 { max-width: 16ch; }

/* both demos, side by side: each is a camcorder screen you press to play */
.duo { max-width: 1160px; margin: 0 auto; }
.duo__title { font-size: clamp(26px, 3.4vw, 38px); margin: 0 0 22px; }
.duo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 28px); }
.duo .screen__frame { max-width: none; border-radius: 16px; transition: transform 0.3s cubic-bezier(.3,.7,.3,1), box-shadow 0.3s ease; }
.duo .screen__frame:hover, .duo .screen__frame:focus-within { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(255, 217, 160, 0.4), 0 40px 90px rgba(0, 0, 0, 0.6), 0 0 80px rgba(255, 180, 100, 0.22); }
.duo .osd--mode { font-size: clamp(22px, 2.6vw, 38px); }
.duo .osd--stamp { font-size: clamp(16px, 1.8vw, 26px); }
.duo .screen__hint { max-width: 62%; font-size: clamp(13px, 1.15vw, 16px); line-height: 1.35; }
.duo .screen__hint b { display: block; font: 700 clamp(17px, 1.7vw, 24px)/1.15 var(--hand); color: var(--lamp); margin-bottom: 4px; }
.collect .mcard + .mcard { margin-left: 0; }
@media (max-width: 760px) { .duo__grid { grid-template-columns: 1fr; } .duo .screen__hint { max-width: 70%; } }

/* wide screens: the promise on the left, both demos stacked on the right, so the first screen is the whole pitch */
@media (min-width: 1100px) {
  .lead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 48px; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
  .lead .hero { padding: 40px 0; margin: 0; }
  .lead .duo { padding: 40px 0; margin: 0; }
  .lead .duo__grid { grid-template-columns: 1fr; gap: 22px; }
  .lead .duo__grid .screen__frame:first-child { transform: rotate(-1.2deg); } .lead .duo__grid .screen__frame:last-child { transform: rotate(0.9deg) translateX(-18px); }
  .lead .duo__grid .screen__frame:hover, .lead .duo__grid .screen__frame:focus-within { transform: rotate(0) translateY(-4px); }
  .lead .duo__title { font-size: 24px; margin-bottom: 16px; }
}

/* ---------- the time machine (Chris, 2026-11-12: "something more exciting than a plum background... rewinding, or a time
   machine"). Behind everything, a tape rewinds: both demo scenes running backward and fast, with tracking bands rolling
   through and the colors fringing, dimmed under the dusk so the words read. In the corner, the camcorder's counter winds
   the date back from today to the night of the first moment as you scroll, and says PLAY when you stop. ---------- */
body { background-color: #0d0b1a; background-image: none; }
.rewind { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #0d0b1a url(rewind-bg.jpg) center / cover; }
.rewind video { position: absolute; inset: -2%; width: 104%; height: 104%; object-fit: cover; filter: blur(1.5px) saturate(1.25) brightness(0.85); animation: jitter 7s steps(1) infinite; }
.rewind::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 2px, transparent 2px 4px),
    linear-gradient(90deg, rgba(13, 11, 26, 0.78) 0%, rgba(13, 11, 26, 0.45) 55%, rgba(13, 11, 26, 0.3) 100%),
    linear-gradient(180deg, rgba(13, 11, 26, 0.2), rgba(13, 11, 26, 0.55)); }
.rewind__track { position: absolute; left: -5%; right: -5%; height: 9vh; top: -12vh; z-index: 1; mix-blend-mode: screen; opacity: 0.5;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0 2px, transparent 2px 6px, rgba(255, 255, 255, 0.25) 6px 7px, transparent 7px 13px),
    linear-gradient(180deg, transparent, rgba(255, 220, 255, 0.35) 45%, rgba(160, 220, 255, 0.35) 55%, transparent);
  filter: blur(0.6px); animation: track 3.4s linear infinite; }
.rewind__track--b { height: 3vh; opacity: 0.35; animation-duration: 5.3s; animation-delay: -2.1s; }
@keyframes track { from { transform: translateY(0) skewX(-8deg); } to { transform: translateY(125vh) skewX(-8deg); } }
@keyframes jitter { 0%, 100% { transform: none; } 31% { transform: translateX(-6px); } 32% { transform: none; } 67% { transform: translateX(5px) skewX(1deg); } 68% { transform: none; } }
.tc { position: fixed; right: max(16px, 2vw); text-align: right; bottom: max(14px, 2vh); z-index: 25; display: grid; gap: 2px; font-family: var(--vcr); color: #fff; line-height: 0.95; pointer-events: none;
  text-shadow: 2px 0 rgba(255, 40, 110, 0.6), -2px 0 rgba(40, 200, 255, 0.6), 0 0 14px rgba(255, 255, 255, 0.5); }
.tc b { font-weight: 400; font-size: 22px; letter-spacing: 0.06em; }
.tc span { font-size: clamp(26px, 2.6vw, 38px); color: var(--lamp); letter-spacing: 0.04em; }
.tc.play b { color: #fff; }
.tc:not(.play) b { animation: blink 0.8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .rewind video { display: none; } .rewind__track { display: none; } .tc b { animation: none; } }
@media (max-width: 560px) { .tc span { font-size: 24px; } .tc b { font-size: 16px; } }
/* the sections that had the room's plain wall behind them now float over the tape */
.how { background: linear-gradient(180deg, transparent, rgba(13, 11, 26, 0.35), transparent); }
@media (min-width: 1000px) { .collect { flex-wrap: nowrap; } .collect .mcard { width: 380px; } .collect .mnext { width: 260px; } }

/* what's inside every moment: the listing photos as three cards (2026-11-12) */
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 28px); margin: 36px 0 28px; }
.feat { margin: 0; border-radius: 18px; overflow: hidden; background: rgba(23, 22, 41, 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(255, 230, 200, 0.14), 0 26px 60px rgba(0, 0, 0, 0.45); transition: transform 0.3s cubic-bezier(.3,.7,.3,1), box-shadow 0.3s ease; }
.feat:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(255, 217, 160, 0.4), 0 34px 70px rgba(0, 0, 0, 0.55), 0 0 50px rgba(255, 180, 100, 0.16); }
.feat img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.feat figcaption { padding: 16px 20px 20px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.feat figcaption b { display: block; margin-bottom: 4px; font: 700 clamp(19px, 1.7vw, 22px)/1.2 var(--serif); color: #fff4e2; }
@media (max-width: 860px) { .feats { grid-template-columns: 1fr; } }