/* mmory.xyz — black sky, ivory type, one phone. No framework, no build step. */

:root {
  --ivory: #edebe6;
  --ivory-soft: rgba(237, 235, 230, 0.66);
  --ivory-faint: rgba(237, 235, 230, 0.44);
  --hairline: rgba(237, 235, 230, 0.12);
  --champagne: #eddbb8;
  --measure: 34rem;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; background: #000; color: var(--ivory);
  font: 400 1.0625rem/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible, .badge:focus-visible { outline: 2px solid var(--champagne); outline-offset: 4px; border-radius: 6px; }

.skip { position: absolute; left: -999px; top: 0; background: #000; padding: 0.6rem 1rem; z-index: 10; }
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* The sky sits behind everything and never takes a tap. */
#sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
/* The galaxy behind each phone is deliberately wider than the screen. It is clipped here so
   that it can never widen the page — which on a phone would shift everything sideways. */
.page { position: relative; z-index: 1; overflow-x: hidden; overflow-x: clip; width: 100%; }

/* ---- Type ---- */
.wordmark { font-size: 1.05rem; font-weight: 500; letter-spacing: -0.01em; text-decoration: none; color: var(--ivory); opacity: 0.9; }
h1, h2 { font-weight: 500; letter-spacing: -0.025em; line-height: 1.08; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 7.2vw, 4.5rem); }
h2 { font-size: clamp(2rem, 5vw, 3.1rem); }
.lede { color: var(--ivory-soft); font-size: clamp(1.05rem, 1.7vw, 1.2rem); max-width: var(--measure); margin: 1.4rem auto 0; text-wrap: pretty; }
.small { color: var(--ivory-faint); font-size: 0.95rem; max-width: var(--measure); margin: 1.5rem auto 0; text-wrap: pretty; }

/* ---- Layout: one centred column, never stretched ---- */
header.top { padding: 1.6rem 1.5rem 0; text-align: center; }
section { padding: clamp(4.5rem, 11vw, 9rem) 1.5rem; text-align: center; max-width: 72rem; margin: 0 auto; }
section.hero { padding-top: clamp(3rem, 7vw, 5.5rem); }

/* ---- The App Store badge: Apple's artwork, at Apple's proportions ---- */
.badge { display: inline-block; margin-top: 2.2rem; line-height: 0; }
.badge img { height: 54px; width: auto; }
.soon {
  display: inline-block; margin: 2.2rem 0 0; padding: 0.85rem 1.4rem; border-radius: 999px;
  border: 1px solid var(--hairline); color: var(--ivory-soft); font-size: 0.98rem;
}

/* ---- The phone, and the galaxy it sits in ---- */
.stage { position: relative; margin: clamp(3rem, 7vw, 5rem) auto 0; width: min(21.5rem, 78vw); }
.stage::before {
  /* The light around the hole, reaching well past the phone so the product sits in space
     rather than on a page. Pure CSS: no image, no WebGL. */
  content: ""; position: absolute; z-index: -1; left: 50%; top: 46%;
  width: 250%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side, rgba(237, 219, 184, 0.00) 27%, rgba(237, 219, 184, 0.16) 31%, rgba(237, 219, 184, 0.05) 44%, transparent 68%),
    radial-gradient(closest-side, rgba(120, 130, 170, 0.10), transparent 72%);
  border-radius: 50%;
  animation: breathe 16s ease-in-out infinite alternate;
}
.stage.quiet::before { opacity: 0.55; width: 200%; }
@keyframes breathe { from { transform: translate(-50%, -50%) scale(1) rotate(0deg); } to { transform: translate(-50%, -50%) scale(1.045) rotate(5deg); } }

.phone {
  position: relative; border-radius: 3.1rem; padding: 0.6rem; background: #0b0b0c;
  border: 1px solid rgba(237, 235, 230, 0.16);
  box-shadow: 0 0 0 1px #000, 0 40px 120px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.phone img { border-radius: 2.55rem; width: 100%; height: auto; aspect-ratio: 1320 / 2868; background: #000; }

/* ---- A tiny ship, once in a while ---- */
.ship { position: absolute; top: 9%; left: -8%; width: 26px; opacity: 0; color: var(--ivory); animation: crossing 46s linear 6s infinite; pointer-events: none; }
@keyframes crossing { 0% { transform: translateX(0); opacity: 0; } 2% { opacity: 0.7; } 20% { opacity: 0.7; } 23% { transform: translateX(118vw); opacity: 0; } 100% { transform: translateX(118vw); opacity: 0; } }
.hero { position: relative; }

/* ---- Tell it. Forget about it. ---- */
.loop { list-style: none; padding: 0; margin: 2.6rem auto 0; max-width: 24rem; display: grid; gap: 0.7rem; text-align: left; }
.loop li { padding: 0.85rem 1.15rem; border-radius: 1.3rem; font-size: 1.06rem; width: fit-content; max-width: 88%; }
.loop .said { background: rgba(237, 235, 230, 0.08); border: 1px solid var(--hairline); }
.loop .later { color: var(--ivory-faint); font-size: 0.85rem; padding: 0.4rem 0; margin: 0 auto; letter-spacing: 0.04em; text-transform: uppercase; }
.loop .answer { background: var(--ivory); color: #0a0a0a; margin-left: auto; font-weight: 500; }

/* ---- Private by design ---- */
.claims { list-style: none; padding: 0; margin: 2.4rem auto 0; display: grid; gap: 1.5rem; font-size: clamp(1.25rem, 2.6vw, 1.7rem); letter-spacing: -0.015em; }
/* Each claim carries one line of explanation, in the supporting-copy style. */
.claims span { display: block; margin: 0.35rem auto 0; max-width: var(--measure); color: var(--ivory-soft); font-size: 1rem; letter-spacing: 0; text-wrap: pretty; }
.nots { list-style: none; padding: 0; margin: 2.2rem auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.nots li { padding: 0.5rem 1rem; border: 1px solid var(--hairline); border-radius: 999px; color: var(--ivory-soft); font-size: 0.95rem; }

/* ---- There when you need it: mmory's own marks, redrawn ---- */
.places { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; max-width: 46rem; margin: 3rem auto 0; }
.place { padding: 1.8rem 1rem 1.4rem; border: 1px solid var(--hairline); border-radius: 1.6rem; background: rgba(0, 0, 0, 0.55); }
.place svg { height: 74px; width: auto; max-width: 100%; color: var(--ivory); }
/* One height for all three pictures, so the three labels share a line. */
.place .art { height: 160px; display: flex; align-items: center; justify-content: center; }
/* Explicit size and ratio: it must not be able to stretch, and it must shrink with a narrow card. */
.place .lockshot { flex: none; width: 180px; max-width: 100%; height: auto; aspect-ratio: 9 / 8; }
/* The canonical black hole, drawn past its tile so its faded edge never shows — as the widget does.
   Sizes are explicit on purpose: nothing here may depend on the image's own width and height. */
.place .mark { flex: none; box-sizing: border-box; width: 104px; height: 104px; overflow: hidden; background: #000; border: 1px solid rgba(237, 235, 230, 0.22); border-radius: 24px; }
.place .mark img { display: block; width: 120px; height: 120px; max-width: none; margin: -10px 0 0 -9px; }
.place p { margin: 1.1rem 0 0; color: var(--ivory-soft); font-size: 0.95rem; }
@media (max-width: 40rem) { .places { grid-template-columns: 1fr; max-width: 18rem; } }

/* ---- Footer ---- */
footer { padding: 3rem 1.5rem 3.5rem; text-align: center; color: var(--ivory-faint); font-size: 0.9rem; }
footer nav { display: flex; justify-content: center; gap: 1.6rem; margin-bottom: 1rem; }
footer a { color: var(--ivory-soft); text-decoration: none; padding: 0.6rem 0.2rem; }
footer a:hover { color: var(--ivory); }

/* ---- Legal and support pages: the same sky, and type you can read for ten minutes ---- */
.doc { max-width: 42rem; margin: 0 auto; padding: 3rem 1.5rem 5rem; text-align: left; }
.doc .sheet { background: rgba(0, 0, 0, 0.78); border: 1px solid var(--hairline); border-radius: 1.4rem; padding: clamp(1.5rem, 4vw, 2.75rem); }
.doc h1 { font-size: clamp(2rem, 5vw, 2.75rem); }
.doc h2 { font-size: 1.35rem; letter-spacing: -0.015em; margin: 2.6rem 0 0.7rem; line-height: 1.25; }
.doc h3 { font-size: 1.05rem; font-weight: 600; margin: 1.8rem 0 0.4rem; }
.doc p, .doc li { color: rgba(237, 235, 230, 0.84); }
.doc ul { padding-left: 1.2rem; }
.doc li { margin: 0.35rem 0; }
.doc a { color: var(--champagne); text-underline-offset: 3px; }
.doc .meta { color: var(--ivory-faint); font-size: 0.92rem; margin-top: 0.6rem; }
.doc .summary { border: 1px solid var(--hairline); border-radius: 1rem; padding: 1.1rem 1.3rem; margin: 1.8rem 0 0; background: rgba(237, 235, 230, 0.04); }
.doc .summary p:first-child, .doc .summary ul { margin-top: 0; }
.doc .summary ul { margin-bottom: 0; }
.doc table { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin: 1rem 0; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 0.65rem 0.6rem 0.65rem 0; border-bottom: 1px solid var(--hairline); color: rgba(237, 235, 230, 0.84); }
.doc th { color: var(--ivory-faint); font-weight: 500; font-size: 0.85rem; }
.doc details { border-bottom: 1px solid var(--hairline); padding: 0.2rem 0; }
.doc summary { cursor: pointer; padding: 0.9rem 0; font-weight: 500; color: var(--ivory); list-style-position: outside; }
.doc details p { margin-top: 0; }
.doc .pending { color: var(--champagne); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stage::before, .ship { animation: none; }
  .ship { display: none; }
}