/* BiblioLIO web — shared design system.
 *
 * Mirrors the app's Theme.swift (Oct 2026): flat white paper, near-black
 * ink, coral #FF6B6B as the single accent, blush hairlines instead of
 * drop shadows, SF-style system type. The phone mock reproduces the feed
 * (SlidingFeedView / HomeTheme) at 0.769 px per app point — a 390 pt
 * iPhone drawn 300 px wide — so every size below can be read off the
 * Swift code directly. */

:root {
  /* Palette (Theme.swift) */
  --paper:        #ffffff;
  --cream:        #ffffff;
  --ink:          #141414;
  --ink-soft:     #707070;
  --blush:        #e8e6e1;
  --coral:        #ff6b6b;
  --coral-deep:   #e84f4f;
  --coral-wash:   rgba(255,107,107,0.12);
  --coral-ring:   rgba(255,107,107,0.28);
  --moss:         #3f7d4c;
  --moss-wash:    #deebe0;
  --shadow:       rgba(20,20,20,0.12);
  --shadow-deep:  rgba(20,20,20,0.22);
  /* The video's canvas: light paper with the 3D map's faint pink / lilac /
     blue washes behind it. */
  --canvas:       #f4f3f1;
  --blob-pink:    rgba(255,150,150,0.42);
  --blob-blue:    rgba(150,195,255,0.42);
  --blob-lilac:   rgba(200,175,255,0.36);

  /* The site ships light only, like the app's default. */
  color-scheme: light;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Helvetica Neue", "Segoe UI", Roboto, Inter, sans-serif;
}


* { box-sizing: border-box; margin: 0; padding: 0; }

/* The hidden attribute must always win, even over display:flex classes. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--canvas);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
}

.page {
  position: relative;
  min-height: 100vh;
  overflow-x: clip;
}
/* Three drifting washes, as in the video's background — barely there.
   Painted once and moved on the compositor (transform), never repainted:
   animating background-position on a viewport-sized gradient repaints the
   whole page every frame and made the phone's pager stutter. */
.page::before {
  content: '';
  position: fixed;
  inset: -12vmax;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(closest-side at 18% 16%, var(--blob-pink), transparent),
    radial-gradient(closest-side at 84% 80%, var(--blob-blue), transparent),
    radial-gradient(closest-side at 76% 16%, var(--blob-lilac), transparent);
  background-size: 70vmax 70vmax, 70vmax 70vmax, 55vmax 55vmax;
  background-position: 18% 16%, 84% 80%, 76% 16%;
  background-repeat: no-repeat;
  opacity: 0.7;
  will-change: transform;
  animation: drift 40s ease-in-out infinite alternate;
}
.page > * { position: relative; z-index: 1; }

@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(5vmax, 4vmax, 0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .page::before { animation: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── Nav ── */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 22px 24px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.wordmark img { height: 30px; width: auto; display: block; }

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  transition: color 0.15s, background 0.15s;
}
.nav-link:hover { color: var(--ink); background: var(--cream); box-shadow: inset 0 0 0 1px var(--blush); }
.nav-cta {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--coral), var(--coral-deep));
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(255,107,107,0.30);
  transition: transform 0.15s, box-shadow 0.15s;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(255,107,107,0.38); }

/* ── Type helpers ── */
h1, h2, h3 { letter-spacing: -0.025em; line-height: 1.06; font-weight: 750; }

/* ── Buttons (CoralButtonStyle / SquishyButtonStyle) ── */
.btn {
  font-family: var(--font);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  font-size: 0.95rem;
  font-weight: 700;
  border: none;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--coral), var(--coral-deep));
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(255,107,107,0.30);
  transition: transform 0.2s cubic-bezier(.2,.9,.3,1.3), box-shadow 0.2s, opacity 0.2s;
}
.btn:hover  { box-shadow: 0 10px 28px rgba(255,107,107,0.38); }
.btn:active { transform: scale(0.97); }
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.btn--ghost {
  background: var(--cream);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--blush);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink-soft); }
.btn--small { padding: 9px 16px; font-size: 0.85rem; border-radius: 18px; }
.btn--text {
  background: none;
  box-shadow: none;
  color: var(--coral-deep);
  padding: 8px 10px;
}
.btn--text:hover { box-shadow: none; background: var(--coral-wash); }

/* ── Inputs (PaperFieldStyle) ── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-row { display: flex; gap: 14px; }
.field-row .field { flex: 1; }

.field-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.field-hint {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-weight: 500;
  line-height: 1.5;
}
.field-hint.center { text-align: center; }
.field-hint a { color: var(--coral-deep); }

input, textarea, select {
  font-family: var(--font);
  padding: 11px 16px;
  font-size: 0.95rem;
  background: var(--cream);
  border: 1.5px solid var(--blush);
  border-radius: 14px;
  color: var(--ink);
  width: 100%;
  outline: none;
  font-weight: 500;
  transition: border-color 0.2s, box-shadow 0.2s;
  resize: vertical;
}
input:focus, textarea:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 4px var(--coral-wash);
}
input::placeholder, textarea::placeholder { color: var(--ink-soft); opacity: 0.7; font-weight: 400; }
input:disabled { opacity: 0.5; cursor: not-allowed; }
input.invalid, textarea.invalid { border-color: var(--coral); }

/* ── Cards ── */
.card {
  background: var(--cream);
  border: 1px solid var(--blush);
  border-radius: 24px;
  box-shadow: 0 1px 2px var(--shadow);
}

/* ── Chips (the app's filter pills) ── */
.chip {
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--blush);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.chip:hover { border-color: var(--ink-soft); }
.chip:active { transform: scale(0.96); }
.chip.on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.chip--all.on { background: var(--coral); border-color: var(--coral); color: #fff; }

/* ── Footer ── */
.footer {
  text-align: center;
  padding: 44px 20px 26px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.footer a { color: var(--ink-soft); }
.footer a:hover { color: var(--ink); }

/* ════════════════════════════════════════════════════════════════════
   Phone + in-app feed mock (home demo and wizard preview)
   One app point = var(--pt). Sizes quote SlidingFeedView / HomeView.
   ════════════════════════════════════════════════════════════════════ */

.phone {
  --pt: 0.769px;
  --bezel: 10px;
  --screen-w: calc(390 * var(--pt));
  --screen-h: calc(844 * var(--pt));
  --tabbar-h: calc(83 * var(--pt));       /* 49 bar + 34 home indicator */
  --top-inset: calc(59 * var(--pt));      /* status band on island phones */
  --header-h: calc(36 * var(--pt));       /* the LÍOs row */
  --header-inset: calc(var(--top-inset) + 4px + var(--header-h) + 10 * var(--pt));
  width: calc(var(--screen-w) + 2 * var(--bezel));
}
/* Whole-pixel screen and bar: the pager slides by multiples of its height,
   and a fractional height (844 × 0.769 = 649.03px) puts page boundaries
   between pixels — WebKit snaps the composited slide and the foot of the
   previous page shows as a hairline at the top of the screen. */
@supports (width: round(1.5px, 1px)) {
  .phone {
    --screen-w: round(calc(390 * var(--pt)), 1px);
    --screen-h: round(calc(844 * var(--pt)), 1px);
    --tabbar-h: round(calc(83 * var(--pt)), 1px);
  }
}
.phone {
  padding: var(--bezel);
  border-radius: 42px;
  background: #101010;
  box-shadow:
    0 30px 60px rgba(20,20,20,0.22),
    0 4px 12px rgba(20,20,20,0.12),
    inset 0 0 0 2px rgba(255,255,255,0.08);
  flex-shrink: 0;
  user-select: none;
}
.phone--small { --pt: 0.64px; --bezel: 8px; border-radius: 36px; }
.phone--small .screen { border-radius: 28px; }

.screen {
  position: relative;
  isolation: isolate;
  transform: translateZ(0);     /* clip the rounded screen on the GPU */
  width: var(--screen-w);
  height: var(--screen-h);
  border-radius: 33px;
  overflow: hidden;
  background: #ffffff;
  /* Feed tokens (HomeTheme, light). The app ships light by default; the
     mock does not follow the site's dark mode. */
  --f-ink: #213129;
  --f-ink-soft: #6f8075;
  --f-hairline: rgba(33,49,41,0.10);
  --f-sage: rgba(142,165,146,0.14);
  --f-coral: #ff6b6b;
  --f-coral-deep: #e84f4f;
  --f-coral-wash: rgba(255,107,107,0.12);
  --f-surface: #ffffff;
  --f-bar: #ffffff;
  --f-bar-icon: #6f8075;
  color: var(--f-ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
/* A photo page (LÍO picture or background ad) pins the window dark. */
.screen.over-photo {
  background: #000;
  --f-surface: #000000;
  --f-bar: #000000;
  --f-bar-icon: #c6c6c6;
  --f-hairline: rgba(255,255,255,0.12);
}

.island {
  position: absolute;
  top: calc(11 * var(--pt));
  left: 50%;
  transform: translateX(-50%);
  width: calc(124 * var(--pt));
  height: calc(36 * var(--pt));
  border-radius: 999px;
  background: #000;
  z-index: 12;
}
.status-time {
  position: absolute;
  top: calc(17 * var(--pt));
  left: calc(32 * var(--pt));
  font-size: calc(16 * var(--pt));
  font-weight: 600;
  z-index: 12;
  color: var(--f-ink);
  letter-spacing: -0.01em;
}
.status-right {
  position: absolute;
  top: calc(17 * var(--pt));
  right: calc(26 * var(--pt));
  display: flex;
  gap: calc(5 * var(--pt));
  align-items: center;
  z-index: 12;
  color: var(--f-ink);
}
.over-photo .status-time, .over-photo .status-right { color: #fff; }
.status-right svg { display: block; }

/* The floating LÍOs header (LIObuscadorHeaderRow). */
.feed-header {
  position: absolute;
  top: calc(var(--top-inset) + 4px);
  left: calc(20 * var(--pt));
  right: calc(20 * var(--pt));
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: calc(2 * var(--pt));
  z-index: 10;
  color: var(--f-ink);
}
.over-photo .feed-header { color: #fff; }
.feed-title {
  font-size: calc(27.3 * var(--pt));
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  transform: translateY(calc(2 * var(--pt)));
}
.feed-chevron {
  width: calc(26 * var(--pt));
  height: calc(26 * var(--pt));
  display: grid;
  place-items: center;
}
.feed-chevron svg { width: calc(15 * var(--pt)); height: calc(15 * var(--pt)); }
.feed-plus {
  margin-left: auto;
  width: calc(38 * var(--pt));
  height: calc(38 * var(--pt));
  border-radius: calc(12 * var(--pt));
  background: var(--f-coral);
  color: #fff;
  display: grid;
  place-items: center;
}
.feed-plus svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }
.over-ad .feed-header { filter: drop-shadow(0 1px 3px rgba(0,0,0,0.45)); }

/* The pager: fills the screen between the physical top edge and the bar. */
.pager {
  position: absolute;
  inset: 0 0 var(--tabbar-h) 0;
  overflow: hidden;
}
.pager-track {
  height: 100%;
  transition: transform 0.6s cubic-bezier(.3,.9,.3,1);
  will-change: transform;      /* its own compositor layer: slides never repaint */
}
.feed-page {
  position: relative;
  height: 100%;
  overflow: hidden;
  /* Pages keep their own colour: a LÍO page stays paper while the window
     pins dark around a photo page, so a slide never repaints its neighbour. */
  background: #ffffff;
}
.feed-page.is-photo { background: #000000; }
.feed-page::after {
  /* Hairline at every page's foot, as in the app. */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--f-hairline);
}

/* ── Author / sponsor row ── */
.author-row {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--pt));
  min-width: 0;
}
.avatar {
  width: calc(46 * var(--pt));
  height: calc(46 * var(--pt));
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: calc(18 * var(--pt));
  overflow: hidden;
  background: linear-gradient(135deg, #3a3a3a, #6e6e6e);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar--me   { background: linear-gradient(135deg, #ff6b6b, #ff9a8b); }
.avatar--anon { background: var(--f-coral-wash); color: var(--f-coral-deep); }
.avatar--sponsor { background: var(--f-coral-wash); color: var(--f-coral-deep); }
.avatar--sponsor svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }
.author-col { display: flex; flex-direction: column; gap: calc(1 * var(--pt)); min-width: 0; }
.name-row { display: flex; align-items: center; gap: calc(6 * var(--pt)); min-width: 0; }
.author-name {
  font-size: calc(17 * var(--pt));
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--f-ink);
}
.study-line {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--pt));
  font-size: calc(12 * var(--pt));
  font-weight: 500;
  color: var(--f-ink-soft);
  opacity: 0.85;
  white-space: nowrap;
}
.over-photo-text .author-name { color: #fff; }
.over-photo-text .study-line { color: rgba(255,255,255,0.72); opacity: 1; }
.erasmus-badge {
  display: inline-grid;
  place-items: center;
  width: calc(11 * var(--pt));
  height: calc(11 * var(--pt));
  border-radius: 50%;
  background: #1d5fe0;
  color: #fff;
  font-size: calc(8 * var(--pt));
  font-weight: 700;
  line-height: 1;
}

/* Kind / friend / city / sponsored pills (KindPill, FriendBadge…). */
.pill {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--pt));
  height: calc(17 * var(--pt));
  padding: 0 calc(6 * var(--pt));
  border-radius: 999px;
  font-size: calc(10 * var(--pt));
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--tint, var(--f-ink-soft));
  background: color-mix(in srgb, var(--tint, var(--f-ink-soft)) 14%, transparent);
}
.pill svg { width: calc(9 * var(--pt)); height: calc(9 * var(--pt)); }
.over-photo-text .pill {
  color: #fff;
  background: color-mix(in srgb, var(--tint, var(--f-ink-soft)) 85%, transparent);
}
.pill--sponsored {
  height: auto;
  padding: calc(5 * var(--pt)) calc(9 * var(--pt));
  font-size: calc(11 * var(--pt));
  color: var(--f-ink-soft);
  background: var(--f-sage);
}
.over-photo-text .pill--sponsored { color: rgba(255,255,255,0.95); background: rgba(255,255,255,0.24); }

/* ── Post body ── */
.post-body {
  font-size: calc(16 * var(--pt));
  line-height: calc(20 * var(--pt));
  font-weight: 400;
  color: var(--f-ink);
  overflow-wrap: anywhere;
}
.over-photo-text .post-body { color: #fff; }
.post-time {
  font-size: calc(11 * var(--pt));
  font-weight: 500;
  color: var(--f-ink-soft);
  opacity: 0.8;
}
.over-photo-text .post-time { color: rgba(255,255,255,0.72); opacity: 1; }
.over-photo-text .post-block { text-shadow: 0 1px 3px rgba(0,0,0,0.45); }

/* ── Post page layout (SlidingPostPage, embedded) ── */
.post-page {
  position: absolute;
  inset: 0;
  display: flex;
  gap: calc(14 * var(--pt));
  padding: calc(var(--header-inset) + 14 * var(--pt)) calc(10 * var(--pt)) calc(12 * var(--pt)) calc(20 * var(--pt));
}
.post-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.post-col.bottom { justify-content: flex-end; }
.post-block { display: flex; flex-direction: column; gap: calc(14 * var(--pt)); }
.post-text { display: flex; flex-direction: column; gap: calc(2 * var(--pt)); }
.rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: calc(22 * var(--pt));
  padding-bottom: calc(54 * var(--pt));
  color: var(--f-ink);
  flex-shrink: 0;
  width: calc(36 * var(--pt));
}
.over-photo .rail { color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45)); }
.rail-item { display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--pt)); }
.rail-item svg { display: block; }
.rail-item span { font-size: calc(13 * var(--pt)); font-weight: 600; }
.rail-item.liked svg { color: #ff3040; }
.rail-heart svg  { width: calc(29 * var(--pt)); height: calc(29 * var(--pt)); }
.rail-bubble svg { width: calc(25 * var(--pt)); height: calc(25 * var(--pt)); }
.rail-plane svg  { width: calc(25 * var(--pt)); height: calc(25 * var(--pt)); }
.rail-more svg   { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }

/* Photo backdrop: aspect-fit on black (TikTok), scrim bands top + bottom. */
.photo-backdrop {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #000;
}
.photo-backdrop > .photo {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* The CSS-drawn scene sizes itself from its aspect ratio; Safari would
   otherwise grow it to the full height and crop the sides. */
.photo-backdrop > .photo-scene { max-height: none; }
.photo-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.10) 30%, rgba(0,0,0,0.10) 55%, rgba(0,0,0,0.52) 100%);
}
/* A CSS "photo" for the demo — a table seen from above, no real pictures. */
.photo-scene {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  position: relative;
  background:
    radial-gradient(circle at 68% 30%, #2a1407 0 9%, #f1e9dc 9.5% 13.5%, transparent 14%),   /* coffee */
    radial-gradient(ellipse 70% 40% at 30% 10%, rgba(255,240,210,0.55), transparent 70%),      /* window light */
    repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0 2px, transparent 2px 46px),           /* wood grain */
    linear-gradient(180deg, #a86f42 0%, #8d5a33 60%, #6f4323 100%);
}
.photo-scene::before {  /* a notebook with lines */
  content: '';
  position: absolute;
  left: 10%; top: 44%; width: 48%; height: 40%;
  border-radius: 3%;
  background:
    repeating-linear-gradient(180deg, transparent 0 14px, rgba(60,80,120,0.25) 14px 15px),
    #f5f1e8;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  transform: rotate(-4deg);
}
.photo-scene::after {   /* a pen */
  content: '';
  position: absolute;
  left: 40%; top: 52%; width: 34%; height: 3.2%;
  border-radius: 999px;
  background: linear-gradient(90deg, #1a1a1a 0 85%, #d9c27a 85%);
  transform: rotate(-24deg);
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}

/* Comment bubbles under a plain page (PageCommentsArea.bubble). */
.comments { display: flex; flex-direction: column; gap: calc(18 * var(--pt)); margin-top: calc(28 * var(--pt)); }
.comment { display: flex; align-items: flex-start; gap: calc(10 * var(--pt)); }
.comment .avatar {
  width: calc(32 * var(--pt));
  height: calc(32 * var(--pt));
  font-size: calc(13 * var(--pt));
}
.comment-bubble {
  position: relative;
  padding: calc(9 * var(--pt)) calc(13 * var(--pt));
  border-radius: calc(16 * var(--pt));
  background: var(--f-sage);
  box-shadow: inset 0 0 0 1px var(--f-hairline);
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--pt));
  max-width: 100%;
}
.comment-name { font-size: calc(12 * var(--pt)); font-weight: 700; }
.comment-text { font-size: calc(14 * var(--pt)); line-height: 1.3; }
.comment-react {
  position: absolute;
  right: calc(2 * var(--pt));
  bottom: calc(-6 * var(--pt));
  display: flex;
  gap: calc(6 * var(--pt));
  color: var(--f-ink-soft);
  font-size: calc(11 * var(--pt));
  font-weight: 700;
  align-items: center;
}
.comment-react svg { width: calc(12 * var(--pt)); height: calc(12 * var(--pt)); }
.comment-react.liked { color: var(--f-coral); }
.see-all {
  align-self: flex-start;
  font-size: calc(11 * var(--pt));
  font-weight: 700;
  color: var(--f-ink-soft);
  margin-top: calc(-4 * var(--pt));
}

/* Staggered pop-in (the page's build-live choreography). Visible by
   default — the animation only hides it for the delay — so nothing depends
   on an animation actually playing. */
.pop { transform-origin: left center; }
.feed-page.active .pop {
  animation: popIn 0.45s cubic-bezier(.2,.9,.3,1.25) backwards;
  animation-delay: calc(0.28s + var(--i, 0) * 0.12s);
}
@keyframes popIn { from { opacity: 0; transform: translateY(8px) scale(0.92); } }

/* ── Sponsored page (SlidingAdPage, embedded) ── */
.ad-page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(14 * var(--pt));
  padding: calc(var(--header-inset) + 6 * var(--pt)) calc(10 * var(--pt)) calc(16 * var(--pt)) calc(20 * var(--pt));
}
.ad-page .post-body { font-size: calc(16 * var(--pt)); }
.ad-carousel {
  position: relative;
  height: calc(110 * var(--pt));
  border-radius: calc(18 * var(--pt));
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--f-hairline);
  background: var(--f-sage);
}
.ad-carousel-track { display: flex; height: 100%; transition: transform 0.5s cubic-bezier(.3,.9,.3,1); }
.ad-carousel-track img { width: 100%; height: 100%; object-fit: cover; flex-shrink: 0; display: block; }
.ad-carousel .dots { position: absolute; left: 0; right: 0; bottom: calc(8 * var(--pt)); }
.dots { display: flex; justify-content: center; gap: calc(5 * var(--pt)); }
.dot { width: calc(6 * var(--pt)); height: calc(6 * var(--pt)); border-radius: 50%; background: rgba(255,255,255,0.35); transition: background 0.2s; }
.dot.on { background: rgba(255,255,255,0.95); }
.ad-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--pt));
  padding: calc(10 * var(--pt)) calc(16 * var(--pt));
  border-radius: 999px;
  background: var(--f-coral);
  color: #fff;
  font-size: calc(14 * var(--pt));
  font-weight: 700;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ad-cta svg { width: calc(11 * var(--pt)); height: calc(11 * var(--pt)); flex-shrink: 0; }
.ad-cta span { overflow: hidden; text-overflow: ellipsis; }

/* Background layout: the creative IS the page, copy anchored bottom-left. */
.ad-page.bg {
  justify-content: flex-end;
  gap: calc(10 * var(--pt));
  padding: calc(var(--header-inset)) calc(20 * var(--pt)) calc(22 * var(--pt)) calc(20 * var(--pt));
}
.ad-page.bg.multi { padding-bottom: calc(40 * var(--pt)); }
.ad-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--f-sage);
}
.ad-bg-track { display: flex; height: 100%; transition: transform 0.5s cubic-bezier(.3,.9,.3,1); }
.ad-bg-track img { width: 100%; height: 100%; object-fit: cover; flex-shrink: 0; display: block; }
.ad-bg .dots { position: absolute; left: 0; right: 0; bottom: calc(12 * var(--pt)); }
.ad-bg-placeholder {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--f-ink-soft);
  font-size: calc(13 * var(--pt));
  font-weight: 600;
  text-align: center;
  padding: 20px;
  background: linear-gradient(180deg, #e9ece8, #cfd6d0);
}

/* ── Tab bar (HomeView, light bar / black on photo pages) ── */
.tabbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--tabbar-h);
  background: var(--f-bar);
  border-top: 1px solid var(--f-hairline);
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding: calc(9 * var(--pt)) calc(12 * var(--pt)) 0;
  color: var(--f-bar-icon);
  z-index: 11;
}
.tab { position: relative; width: calc(44 * var(--pt)); height: calc(32 * var(--pt)); display: grid; place-items: center; }
.tab svg { width: calc(25 * var(--pt)); height: calc(25 * var(--pt)); }
.tab.on { color: var(--f-ink); }
.over-photo .tab.on { color: #fff; }
.tab .avatar { width: calc(28 * var(--pt)); height: calc(28 * var(--pt)); font-size: calc(11 * var(--pt)); }
.tab-badge {
  position: absolute;
  top: calc(-2 * var(--pt));
  right: calc(4 * var(--pt));
  min-width: calc(17 * var(--pt));
  height: calc(17 * var(--pt));
  padding: 0 calc(4 * var(--pt));
  border-radius: 999px;
  background: var(--f-coral);
  color: #fff;
  font-size: calc(11 * var(--pt));
  font-weight: 700;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--f-bar);
}
.home-indicator {
  position: absolute;
  left: 50%;
  bottom: calc(8 * var(--pt));
  transform: translateX(-50%);
  width: calc(134 * var(--pt));
  height: calc(5 * var(--pt));
  border-radius: 999px;
  background: currentColor;
  opacity: 0.9;
  color: var(--f-ink);
}
.over-photo .home-indicator { color: #fff; }