:root{
  --bg: #14100D;
  --card: #1F1A15;
  --card-hover: #26201A;
  --ink: #F5EFE6;
  --muted: #9C9186;
  --coral: #FF6B4A;
  --gold: #E8B84B;
  --line: #2C261E;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}
.wrap{ max-width: 640px; margin: 0 auto; padding: 40px 16px 80px; position:relative; }

/* ---------- About hero: fills the viewport on load, drifts gently as it scrolls away ----------
   Opacity and transform are driven every frame from app.js (a damped scroll-linked loop),
   not CSS transitions — that's what gives it the slow, lazy drift instead of a snap. The
   compact "locked" identity lives separately in .sticky-header below, not here — this
   block just scrolls away like normal content once you pass it. */
.about-hero{
  min-height: 100vh; min-height: 100dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  margin-top: -40px; padding-top: 40px; /* cancel .wrap's top padding so it's truly full-height on load */
  opacity: 0; /* JS fades this in on load */
}

.about-hero .profile{ flex-direction:column; align-items:center; text-align:center; gap:16px; }
.about-hero .profile-info{ flex:none; }
.about-hero .handle{ justify-content:center; } /* .handle is display:flex for the badge slot — without this, text-align:center has no effect and the name sits left-aligned */
.about-hero .stats{ justify-content:center; }
.about-hero .bio-list{ text-align:center; max-width:380px; }
.about-hero .bio-list li{ padding-left:0; }
.about-hero .bio-list li::before{ content:none; }

.about-hero .main-avatar{ width:128px; height:128px; font-size:36px; }
.about-hero .handle{ font-size:32px; }
.about-hero .tagline{ font-size:16px; }

/* ---------- Sticky header: hidden at the top, fades in + locks to the top on scroll ----------
   Only the name/tagline/CTAs persist here — the avatar, stats, and bio scroll away with
   the hero. Opacity/transform driven from app.js the same damped way as the hero's drift. */
.sticky-header{
  position: fixed; top:0; left:0; right:0; z-index: 50;
  background: rgba(20,16,13,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  opacity: 0; pointer-events: none;
}
.sticky-header-inner{
  max-width: 640px; margin:0 auto; padding: 12px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.sticky-info{ min-width:0; }
.sticky-handle{ font-family:'Space Grotesk'; font-weight:700; font-size:15px; letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sticky-tagline{ color: var(--muted); font-size:11px; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sticky-cta{ display:flex; gap:8px; flex-shrink:0; }

.scroll-cue{
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color: var(--muted); font-size: 11px; letter-spacing:.08em; text-transform:uppercase;
  opacity: 0; animation: bob 1.8s ease-in-out infinite;
  pointer-events:none; z-index: 5;
}
.scroll-cue svg{ width:16px; height:16px; }
@keyframes bob{
  0%,100%{ transform: translate(-50%, 0); }
  50%{ transform: translate(-50%, 6px); }
}

/* ---------- Shared profile block ---------- */
.profile{ display:flex; align-items:center; gap:24px; margin-bottom: 20px; }
.avatar{
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk'; font-weight:700; color: var(--bg);
  flex-shrink:0;
  object-fit: cover;
}
.main-avatar{
  width: 84px; height: 84px; font-size: 28px;
  background: linear-gradient(135deg, var(--coral), var(--gold));
}
.sub-avatar{ width: 64px; height: 64px; font-size: 20px; }
.sub-avatar.pop{ animation: avatarPop .32s cubic-bezier(.2,.8,.2,1); }
@keyframes avatarPop{
  from{ transform: scale(.86); opacity:.35; }
  to{ transform: scale(1); opacity:1; }
}

.profile-info{ flex:1; min-width:0; }
.handle{ font-family:'Space Grotesk'; font-weight:700; font-size: 22px; letter-spacing: -0.02em; display:flex; align-items:center; gap:8px; }
.handle-link{ color:inherit; text-decoration:none; transition: opacity .15s ease; }
.handle-link:hover{ text-decoration:underline; text-underline-offset:3px; text-decoration-color: var(--muted); }
.tagline{ color: var(--muted); font-size: 14px; margin-top: 4px; }
.stats{ display:flex; gap: 22px; margin-top: 14px; }
.stat b{ font-family:'Space Grotesk'; font-size: 16px; display:block; }
.stat span{ font-size: 12px; color: var(--muted); }
.bio{ font-size: 14px; line-height: 1.5; color: var(--ink); margin-bottom: 24px; }
.bio-list{ list-style: none; font-size: 14px; line-height: 1.6; color: var(--ink); margin-bottom: 24px; }
.bio-list li{ padding-left: 16px; position: relative; }
.bio-list li::before{ content: "—"; position: absolute; left: 0; color: var(--muted); }

.cta-row{ display:flex; gap: 10px; margin-bottom: 16px; }
.btn{
  flex:1; text-align:center; padding: 9px 0; border-radius: 8px; white-space: nowrap;
  font-size: 13px; font-weight: 600; cursor:pointer; border: 1px solid var(--line);
  color: var(--ink); background: var(--card); transition: background .15s ease;
}
.about-hero .cta-row{ flex: none; }
.about-hero .cta-row .btn{ flex: none; padding: 9px 20px; }
.btn.primary{ background: var(--coral); color: var(--bg); border-color: transparent; }
.btn:hover{ background: var(--card-hover); }
.btn.primary:hover{ opacity:.9; background: var(--coral); }
.btn.small{ flex:none; padding: 7px 14px; font-size: 12px; }

/* ---------- Grid + tiles ---------- */
.grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-bottom: 8px; position:relative; align-items:start; }
/* Each grid cell is a post (tile + its own caption below), so a caption expanding
   only grows that post's own column instead of the whole row. */
.post{ display:flex; flex-direction:column; min-width:0; }
.tile{
  position:relative; display:block; aspect-ratio: 4/5; overflow:hidden; background: var(--card); cursor:pointer;
  transform-origin: center bottom;
  transition: transform .25s ease, box-shadow .25s ease, aspect-ratio .25s ease;
  will-change: transform, aspect-ratio;
}
/* Hovering plays the clip at its native 9:16 reel ratio instead of the cropped
   4:5 grid thumbnail, popped forward above its neighbors so it reads like tapping
   into the reel on Instagram rather than just a bigger thumbnail. Anchored to the
   bottom edge (not center) so the extra height grows upward into the row above
   instead of downward over the caption sitting right below it. */
.tile.expanded{ aspect-ratio: 9/16; transform: scale(1.06); z-index: 6; box-shadow: 0 16px 34px rgba(0,0,0,.55); }
.tile-instagram{ display:flex; align-items:center; justify-content:center; }
.tile-instagram .play-badge{ position:static; width:26px; height:26px; opacity:.5; transition: opacity .15s ease; }
.tile-instagram:hover .play-badge{ opacity:.85; }
.tile img, .tile video{ width:100%; height:100%; object-fit:cover; display:block; }
/* The poster jpg is a plain <img> sitting under the video, so it's always the
   resting-state cover regardless of how much of the video the browser has
   buffered — the video only fades in (and starts playing) on hover. */
.tile .poster-img{ position:absolute; inset:0; }
.tile video{ position:absolute; inset:0; opacity:0; transition: opacity .2s ease; }
.tile.playing video{ opacity:1; }
.tile .play-badge{ position:absolute; top:8px; right:8px; width:20px; height:20px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.tile .label{
  position:absolute; left:0; right:0; bottom:0; padding: 8px;
  background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
  font-size: 11px; color: var(--ink); opacity:0; transition: opacity .2s ease; font-weight: 500;
}
.tile:hover .label{ opacity:1; }

/* Full caption, below the video (not overlaid on it) — collapsed to nothing until
   its own tile is hovered, and never wider than that tile since it lives in the
   same post column. */
.post-caption{
  max-height:0; opacity:0; overflow:hidden;
  transition: max-height .25s ease, opacity .2s ease, margin .25s ease;
  margin: 0; font-size: 12px; line-height: 1.45; color: var(--ink);
}
.post-caption.show{ max-height:240px; opacity:1; margin-top: 18px; }
.post-caption b{ font-weight:600; margin-right: 4px; }

/* ---------- Section divider (top account -> brands subsection) ---------- */
.section-divider{ margin: 32px 0 28px; padding-top: 24px; border-top: 1px solid var(--line); }

/* ---------- Categories header (label + tabs + dots) ----------
   A distinct block from the carousel below it: its own fade-in trigger, and the
   carousel gets a staggered/delayed fade so the two don't read as one blob (see app.js). */
.categories-header{ opacity: 0; }
.section-label{
  font-family:'Space Grotesk'; font-weight:600; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 14px;
}
#carouselNav{ opacity: 0; }

/* ---------- Category tabs (plain text buttons, not story circles) ---------- */
.category-tabs{ display:flex; gap:8px; margin-bottom: 20px; }
.category-tab{
  flex: 1; min-width: 0; text-align:center; padding: 9px 4px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--card); color: var(--muted); font-size: 13px; font-weight: 600;
  overflow-wrap: break-word; line-height: 1.3;
  cursor:pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
@media (max-width: 480px){
  .category-tab{ font-size: 11.5px; padding: 9px 2px; }
}
.category-tab:hover{ background: var(--card-hover); color: var(--ink); }
.category-tab.active{
  background: linear-gradient(135deg, var(--coral), var(--gold));
  color: var(--bg); border-color: transparent;
}

/* ---------- Carousel position "dots" — actually clickable brand-photo thumbnails ----------
   Each one previews the account (real photo if we have one, initials/gradient if not) and
   jumps straight to it on click; the active one expands into the main avatar below (see
   the .pop animation on .sub-avatar in app.js). */
.carousel-dots{ display:flex; gap:10px; justify-content:center; padding: 4px 0 22px; }
.dot{
  width:34px; height:34px; border-radius:50%; overflow:hidden; flex-shrink:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk'; font-weight:700; font-size:11px; color: var(--bg);
  border: 2px solid transparent; opacity:.55;
  transition: opacity .15s ease, border-color .15s ease, transform .15s ease;
}
.dot img{ width:100%; height:100%; object-fit:cover; display:block; }
.dot:hover{ opacity:.85; }
.dot.active{ opacity:1; border-color: var(--coral); transform: scale(1.08); }

/* ---------- Carousel nav ---------- */
.carousel-nav{ position:relative; }
.nav-arrow{
  position:absolute; top:56px; z-index:20;
  width:38px; height:38px; border-radius:50%;
  background: var(--card); border: 1px solid var(--line);
  color: var(--ink); font-size:18px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: background .15s ease, transform .15s ease;
}
.nav-arrow:hover{ background: var(--card-hover); transform: scale(1.05); }
.nav-arrow.prev{ left: -6px; }
.nav-arrow.next{ right: -6px; }
@media (min-width: 700px){
  .nav-arrow.prev{ left: -50px; }
  .nav-arrow.next{ right: -50px; }
}

.account-view{ transition: opacity .18s ease, transform .18s ease; }
.account-view.sliding-out-left{ opacity:0; transform: translateX(-24px); }
.account-view.sliding-out-right{ opacity:0; transform: translateX(24px); }

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background: rgba(10,8,6,.92);
  display:none; align-items:center; justify-content:center; z-index:100; padding: 24px;
}
.modal-overlay.open{ display:flex; }
.modal{ max-width: 420px; width:100%; background: var(--card); border-radius: 14px; overflow:hidden; border: 1px solid var(--line); }
.modal video, .modal img{ width:100%; display:block; aspect-ratio: 4/5; object-fit:cover; background:#000; }
.modal-body{ padding: 16px 18px 20px; }
.modal-title{ font-family:'Space Grotesk'; font-weight:600; font-size: 15px; margin-bottom:4px; }
.modal-desc{ font-size: 13px; color: var(--muted); line-height:1.5; }
.modal-close{ position:absolute; top:20px; right:24px; color: var(--ink); background:none; border:none; font-size: 26px; cursor:pointer; line-height:1; }

@media (max-width: 480px){
  .main-avatar{ width:66px; height:66px; font-size:22px; }
  .handle{ font-size:18px; }
  .about-hero .main-avatar{ width:96px; height:96px; font-size:30px; }
  .about-hero .handle{ font-size:26px; }
  .sticky-tagline{ display:none; } /* keep the compact bar tight on small screens */
}