/* Momentum: hyper minimal, dark earth */
:root {
  --bg: #000000;
  --ink: #e9e4dc;
  --mut: #8d857a;
  --dim: #57514a;
  --line: rgba(233,228,220,.08);
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
html { background: #000000; overscroll-behavior: none; color-scheme: dark; }
/* paint past every screen edge so iOS never shows its own black in the safe areas */
body::before {
  content: ""; position: fixed; z-index: 0;
  left: -60px; right: -60px; top: -60px; bottom: -60px;
  background: #000000;
}
body {
  font-family: "Avenir Next", "Futura", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--bg); color: var(--ink);
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}

/* film grain over everything */
.grain {
  position: fixed; inset: -50%; z-index: 5; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* chrome */
.chrome {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(16px + env(safe-area-inset-top)) 22px 12px;
  pointer-events: none;
}
.wordmark { font-size: 11px; letter-spacing: .34em; color: var(--mut); font-weight: 500; }
.chrome-right { display: flex; align-items: center; gap: 14px; pointer-events: auto; }
.streak { font-size: 11px; letter-spacing: .18em; color: var(--mut); }
.bell {
  background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--mut); font-family: inherit; font-size: 10px; letter-spacing: .18em;
  padding: 6px 12px; cursor: pointer; text-transform: uppercase;
}
.bell:active { color: var(--ink); }

/* FEED: fixed to the visual viewport so it always fills edge to edge */
.feed {
  position: fixed; inset: 0; overflow-y: auto;
  scroll-snap-type: y mandatory; scrollbar-width: none;
  overscroll-behavior-y: contain;
  background: var(--bg);
}
.feed::-webkit-scrollbar { display: none; }
.slide {
  height: 100%; scroll-snap-align: start; scroll-snap-stop: always;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 34px; cursor: pointer;
  content-visibility: auto; contain-intrinsic-size: auto 100dvh;
}
.pic {
  position: relative; z-index: 2; width: 62px; height: 62px; border-radius: 50%;
  object-fit: cover; object-position: 50% 22%; margin-bottom: 30px;
  filter: grayscale(1) contrast(1.05) brightness(.92);
  box-shadow: 0 0 0 1px var(--line), 0 8px 30px rgba(0,0,0,.5);
  opacity: .92;
}
.slide blockquote {
  position: relative; z-index: 2; max-width: 30rem;
  font-size: clamp(17px, 4.6vw, 22px); font-weight: 300;
  letter-spacing: .16em; line-height: 1.75; text-transform: uppercase;
  text-wrap: balance;
}
.slide blockquote b { font-weight: 700; letter-spacing: .16em; }
.slide .who {
  position: relative; z-index: 2; margin-top: 26px;
  font-size: 11px; letter-spacing: .28em; color: var(--mut); text-transform: uppercase;
}
.slide .bio {
  position: relative; z-index: 2; margin-top: 8px;
  font-size: 10.5px; letter-spacing: .14em; color: var(--dim);
}
.slide .save {
  position: relative; z-index: 2; margin-top: 34px;
  background: none; border: 0; color: var(--mut); cursor: pointer;
  font-family: inherit; font-size: 13px; letter-spacing: .22em;
  padding: 8px 14px; transition: color .2s, transform .2s;
}
.slide .save.on { color: #c9a227; }
.slide .save:active { transform: scale(1.2); }
.burst {
  position: absolute; z-index: 6; pointer-events: none;
  font-size: 74px; color: #c9a227;
  transform: translate(-50%, -50%) scale(0);
  animation: burst .85s cubic-bezier(.2, .8, .3, 1) forwards;
  text-shadow: 0 6px 30px rgba(0,0,0,.45);
}
@keyframes burst {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  22% { transform: translate(-50%, -50%) scale(1.18); opacity: 1; }
  55% { transform: translate(-50%, -58%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -120%) scale(.92); opacity: 0; }
}
.slide .hint {
  position: absolute; bottom: calc(86px + env(safe-area-inset-bottom)); left: 0; right: 0;
  font-size: 9.5px; letter-spacing: .3em; color: var(--dim); text-transform: uppercase;
  z-index: 2;
}

/* EXPLORE / SAVED pages */
.page {
  position: fixed; inset: 0; overflow-y: auto; scrollbar-width: none;
  background: var(--bg);
  padding: calc(64px + env(safe-area-inset-top)) 18px calc(90px + env(safe-area-inset-bottom));
}
.page::-webkit-scrollbar { display: none; }
.page-t { font-size: 12px; font-weight: 500; letter-spacing: .34em; color: var(--mut); margin: 8px 4px 18px; }
.masonry { columns: 2; column-gap: 12px; }
.card {
  break-inside: avoid; margin-bottom: 12px; position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 13px;
  cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
/* pinterest rhythm: mixed card heights */
.card.c-tall { aspect-ratio: 9 / 16; }
.card.c-mid { aspect-ratio: 3 / 4; }
.card.c-short { aspect-ratio: 4 / 5; }
.card .cq {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.card.c-tall .cq { -webkit-line-clamp: 8; }
.card.c-mid .cq { -webkit-line-clamp: 6; }
.card.c-short .cq { -webkit-line-clamp: 5; }
.card .cpic {
  position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%;
  object-fit: cover; object-position: 50% 22%; margin-bottom: 14px;
  filter: grayscale(1) contrast(1.05) brightness(.92);
  box-shadow: 0 0 0 1px var(--line); opacity: .92;
}
.card .cq {
  position: relative; z-index: 1;
  font-size: 11px; font-weight: 300; letter-spacing: .13em; line-height: 1.75; text-transform: uppercase;
  text-wrap: balance;
}
.card .cq b { font-weight: 700; }
.card .ca { position: relative; z-index: 1; margin-top: 13px; font-size: 8.5px; letter-spacing: .24em; color: var(--mut); text-transform: uppercase; }
.card .cb { position: relative; z-index: 1; margin-top: 5px; font-size: 8px; letter-spacing: .12em; color: var(--dim); }
.card .saved-dot { position: absolute; top: 9px; right: 11px; color: #c9a227; font-size: 10px; z-index: 1; }
.empty { color: var(--dim); font-size: 12px; letter-spacing: .12em; padding: 6px; }

/* STORY overlay */
.story {
  position: fixed; inset: 0; z-index: 30;
  background: radial-gradient(60% 45% at 82% -5%, var(--story-glow, #3a3128), transparent 72%) var(--bg);
}
.story[hidden] { display: none; }
.story-x {
  position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 18px; z-index: 2;
  background: none; border: 0; color: var(--mut); font-size: 16px; cursor: pointer; padding: 10px;
}
.story-scroll {
  position: relative; height: 100%; overflow-y: auto; scrollbar-width: none;
  max-width: 34rem; margin: 0 auto; text-align: center;
  padding: calc(84px + env(safe-area-inset-top)) 30px 60px;
  animation: fade .45s ease;
}
.story-scroll::-webkit-scrollbar { display: none; }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } }
.s-quote {
  font-size: 19px; font-weight: 300; letter-spacing: .16em; line-height: 1.75; text-transform: uppercase; text-wrap: balance;
}
.s-quote b { font-weight: 700; }
.s-author { margin-top: 24px; font-size: 11px; letter-spacing: .28em; color: var(--mut); text-transform: uppercase; }
.s-bio { margin-top: 7px; font-size: 10.5px; letter-spacing: .14em; color: var(--dim); }
.s-block { margin-top: 44px; text-align: left; }
.s-label { font-size: 9.5px; letter-spacing: .3em; color: var(--dim); margin-bottom: 12px; }
.s-block p { font-size: 14px; line-height: 1.8; font-weight: 300; color: var(--ink); letter-spacing: .02em; }
.s-heart {
  margin-top: 44px; background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--mut); font-family: inherit; font-size: 11px; letter-spacing: .24em;
  padding: 11px 26px; cursor: pointer; text-transform: uppercase;
}
.s-heart.on { color: #c9a227; border-color: rgba(201,162,39,.4); }

/* orbit-style top treatment for explore/saved:
   a permanent gradient from the screen edge, and a title that fades in on scroll */
.scrim {
  position: fixed; top: 0; left: 0; right: 0; z-index: 14; pointer-events: none;
  height: calc(74px + env(safe-area-inset-top));
  background: linear-gradient(180deg, #000000 0%, #000000 42%, rgba(0,0,0,0) 100%);
}
.mini {
  position: fixed; top: 0; left: 0; right: 0; z-index: 15;
  padding: calc(16px + env(safe-area-inset-top)) 0 10px;
  text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.mini.show { opacity: 1; }
.mini span { font-size: 11px; letter-spacing: .34em; color: var(--ink); font-weight: 500; }

/* reload spinner */
.loader {
  position: fixed; top: 50%; left: 50%; z-index: 45;
  width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border: 2px solid var(--line); border-top-color: var(--mut); border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.view.loading { opacity: .3; transition: opacity .25s; }
.view { transition: opacity .25s; }

#toast {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(12px);
  bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 60;
  max-width: 82vw; text-align: center;
  background: rgba(233,228,220,.96); color: #000000;
  font-size: 12px; letter-spacing: .04em; line-height: 1.55;
  padding: 12px 18px; border-radius: 12px;
  opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* tab bar */
.tabbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 20;
  display: flex; gap: 6px; padding: 4px;
  background: rgba(0,0,0,.72); border: 1px solid var(--line); border-radius: 999px;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.tab {
  background: none; border: 0; color: var(--dim); font-family: inherit;
  font-size: 9.5px; letter-spacing: .26em; font-weight: 500;
  padding: 9px 15px; border-radius: 999px; cursor: pointer; transition: color .2s;
}
.tab.on { color: var(--ink); background: rgba(233,228,220,.07); }

@media (min-width: 760px) {
  .masonry { columns: 3; }
  .page { max-width: 760px; margin: 0 auto; }
}