/* ============================================================
   HehHey
   1. tokens   2. reset   3. layout   4. chrome
   5. components  6. pages   7. responsive
   ============================================================ */

/* ---- 1. tokens ---- */
:root{
  --ink:#17131B;
  --ink-2:#241E28;
  --wine:#7A2230;
  --flare:#FD4C50;
  --flare-rgb:253,76,80;
  --ink-rgb:23,19,27;
  --cream-rgb:245,242,244;
  --sand-rgb:185,178,188;
  --cream:#F5F2F4;
  --sand:#B9B2BC;
  --sand-dim:rgba(185,178,188,.68);
  --line:rgba(185,178,188,.18);
  --gold:#E8935F;

  --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --shell:1080px;
  --shell-narrow:560px;
  --pad:clamp(16px,4vw,32px);
  --r:3px;
  --r-pill:999px;
}

/* ---- 2. reset ---- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink);
  color:var(--cream);
  font:400 17px/1.6 var(--font);
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
img,svg,video{display:block;max-width:100%}

/* The hidden attribute must beat any author display rule.
   Without this, .hidden = true silently does nothing on any
   element whose class sets display. */
a{color:var(--sand);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover:not(.mark){color:var(--flare)}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--flare);outline-offset:2px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--flare);color:var(--ink);padding:10px 14px;z-index:99}

/* ---- 3. layout ---- */
.shell{width:min(var(--shell-narrow),100% - var(--pad)*2);margin-inline:auto;padding-block:48px 72px}
.shell-wide,.shell:has(.lp-hero){width:min(var(--shell),100% - var(--pad)*2)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

/* ---- 4. chrome ---- */
.site-head{position:sticky;top:0;height:71px;background:var(--ink);z-index:30}
.head-in{
  width:min(1180px,100% - var(--pad)*2);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-block:14px;
}
.mark{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--cream);font:700 21px/1 var(--font);letter-spacing:-.02em}
.mark-line{display:inline-flex;align-items:center;gap:7px}
.mark-lips{color:var(--flare);flex:none}
.mark-stack{flex-direction:column;align-items:flex-start;gap:2px;line-height:1.05;font-size:26px}
/* The script sits between the two plain words, so it holds the
   mark together rather than trailing off the end. Larger than
   its neighbours because script x-heights run small. */
.nav{display:flex;align-items:center;gap:20px;font-size:15px}
.nav a{text-decoration:none}
.burger{display:none;background:none;border:0;color:var(--cream);padding:6px}
.inline{display:inline}
.linkish{background:none;border:0;color:var(--sand);padding:0}
.linkish:hover{color:var(--flare)}

.site-foot{border-top:1px solid var(--line);margin-top:auto}
.foot-in{
  width:min(var(--shell),100% - var(--pad)*2);margin-inline:auto;
  display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;
  padding-block:28px 40px;font-size:14px;color:var(--sand-dim);
}
.foot-nav{display:flex;flex-wrap:wrap;gap:18px}
.foot-nav a{text-decoration:none}

body.bare .shell{padding-block:24px}

.flash{background:var(--gold);color:var(--ink);padding:12px var(--pad);font-size:15px;text-align:center}

/* ---- 5. components ---- */
/*
* One button. Size and weight are modifiers, never new classes:
* .btn            primary, filled
* .btn-ghost      secondary, outlined
* .btn-lg/-sm/-xs size
*
* Anything that looked like a button and had its own rule - the follow
* control, the composer chips - uses these instead, so the padding and
* radius live in one place.
*/
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--flare);color:var(--ink);
  border:1px solid transparent;border-radius:var(--r-pill);padding:13px 26px;
  font-weight:700;font-size:16px;line-height:1;text-decoration:none;cursor:pointer;
}
.btn:hover{background:var(--gold);color:var(--ink)}
.btn-lg{padding:16px 32px;font-size:17px}
.btn-sm{padding:9px 16px;font-size:14px}
.btn-xs{padding:5px 12px;font-size:12px;font-weight:600}
.btn-ghost{background:none;color:var(--sand);border-color:var(--line)}
.btn-ghost:hover{background:none;border-color:var(--flare);color:var(--flare)}
.btn-ghost.on{border-color:var(--line);color:var(--sand-dim)}

.card{padding-block:20px}
.card.face{border-bottom:1px solid var(--line)}
.post-by a{text-decoration:none;font-weight:500;color:var(--cream)}
.post-by span{color:var(--sand-dim);font-size:15px}
.post-body{margin-top:8px}
.post-foot{margin-top:12px}
.act{display:inline-flex;align-items:center;gap:7px;background:none;border:0;color:var(--sand-dim);padding:4px 0}
.act:hover,.act[aria-pressed="true"]{color:var(--flare)}
.act .count{font-size:14px}

.face{border:0;padding:0}
.face-img{
  aspect-ratio:1;background:var(--wine);border-radius:var(--r);
  display:grid;place-items:center;color:rgba(var(--cream-rgb),.45);
}
.face-name{margin-top:10px;font-size:16px}
.face-loc{font-size:14px;color:var(--sand-dim)}

.feature svg{color:var(--flare);margin-bottom:12px}
.feature h3{font-size:20px;font-weight:600;margin-bottom:6px}
.feature p{color:var(--sand);font-size:16px;max-width:32ch}

/* Scoped deliberately: a bare .empty is too generic a name and was
   colliding with modifier classes elsewhere. */
div.empty{border:1px dashed var(--line);border-radius:var(--r);padding:40px 24px;text-align:center}
div.empty .empty-title{font-weight:600}
div.empty .empty-body{color:var(--sand-dim);font-size:15px;margin-top:4px}

.form{display:grid;gap:2px;max-width:400px;margin-top:24px}
.field{display:grid;gap:5px;margin-bottom:16px}
.field label{font-size:14px;color:var(--sand)}
.field input{
  background:transparent;border:1px solid rgba(var(--sand-rgb),.4);
  border-radius:var(--r);padding:12px 14px;color:var(--cream);font:inherit;
}
.field input:focus-visible{border-color:transparent}
.form .btn{margin-top:10px;justify-self:start}

.hint{font-size:13px;color:var(--sand-dim)}
.err{color:var(--flare);font-size:14px}
.note{font-size:14px;color:var(--sand-dim)}
.muted{font-size:15px;color:var(--sand)}
.lead{color:var(--sand);font-size:19px;max-width:46ch}
.alt{margin-top:26px;font-size:15px;color:var(--sand)}
.kicker{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--flare);margin-bottom:14px}
.more{display:inline-block;margin-top:24px}

/* ---- 6. pages ---- */
.page-h{font-size:clamp(28px,5vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin-bottom:14px}

.lp-hero{padding-block:72px 56px}
.lp-hero h1{font-size:clamp(38px,6vw,62px);font-weight:700;line-height:1.06;letter-spacing:-.03em}
.lp-hero h1 em{font-style:normal;color:var(--flare)}
.lp-hero .lead{margin-top:20px}
.lp-cta{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:22px}

.lp-stats{display:flex;flex-wrap:wrap;gap:56px;border-block:1px solid var(--line);padding-block:28px}
.lp-stats strong{font-size:32px;font-weight:700;color:var(--flare);letter-spacing:-.02em}
.lp-stats span{display:block;font-size:14px;color:var(--sand)}

.lp-block{padding-block:72px}
.lp-block h2{font-size:clamp(25px,3.4vw,33px);font-weight:700;letter-spacing:-.02em;margin-bottom:36px}

.lp-prompt{border:1px solid var(--line);border-radius:var(--r);padding:48px var(--pad);margin-block:16px}
.lp-prompt blockquote{font-size:clamp(22px,3vw,30px);font-weight:600;line-height:1.25;letter-spacing:-.015em;max-width:26ch}
.lp-prompt .note{margin-top:14px}
.lp-prompt p:last-child{margin-top:26px}

.lp-end{padding-block:88px 100px;text-align:center}
.lp-end h2{font-size:clamp(27px,4vw,42px);font-weight:700;letter-spacing:-.02em;margin-bottom:14px}
.lp-end .lead{margin-inline:auto}
.lp-end .btn-lg{margin-top:28px}

.stream{margin-bottom:28px}

/* ---- 7. responsive ---- */
@media (max-width:860px){
  .grid-3{grid-template-columns:1fr;gap:32px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .lp-stats{gap:28px}
  .lp-hero{padding-block:48px 40px}
  .lp-block{padding-block:56px}

  .burger{display:block}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--ink-2);border-bottom:1px solid var(--line);
    padding:8px var(--pad) 20px;
  }
  .nav.open{display:flex}
  .nav a,.nav form{padding-block:12px;width:100%}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}

.toast{
  position:fixed;left:50%;bottom:24px;translate:-50% 0;
  background:var(--cream);color:var(--ink);
  padding:12px 20px;border-radius:var(--r);font-size:15px;
  opacity:0;pointer-events:none;transition:opacity .18s;z-index:60;
}
.toast.show{opacity:1}

/* ---- composer ---- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.composer{border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:28px}
.composer textarea{
  width:100%;background:transparent;border:0;color:var(--cream);
  font:inherit;resize:vertical;min-height:52px;
}
.composer textarea::placeholder{color:var(--sand-dim)}
.composer textarea:focus-visible{outline:0}
.composer-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.pick{display:inline-flex;align-items:center;gap:8px;color:var(--sand);font-size:14px;cursor:pointer}
.pick:hover{color:var(--flare)}
.pick input{position:absolute;width:1px;height:1px;opacity:0}
.pick:focus-within{color:var(--flare);outline:2px solid var(--flare);outline-offset:4px;border-radius:2px}
.composer-note{font-size:13px;color:var(--sand-dim);margin-top:8px}

/* ---- post media ---- */
.post-media{position:relative;margin-block:12px;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r);background:var(--ink-2)}
.post-media img,.post-media video{display:block;width:100%;height:100%;object-fit:cover}
.post-media.multi{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:6px;background:none}

/* ---- moderation ---- */
.mod-sec{margin-bottom:48px}
.mod-sec h2{font-size:20px;font-weight:600;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.pill{background:var(--wine);color:var(--cream);font-size:13px;font-weight:400;padding:2px 9px;border-radius:20px}
.mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
.mod-item img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r);background:var(--ink-2)}
.mod-by{font-size:14px;color:var(--sand-dim);margin-top:8px}
.mod-acts{display:flex;gap:8px;margin-top:8px}

.shot{position:relative;margin:0}
.shot img{width:100%;height:auto;border-radius:var(--r);background:var(--ink-2);display:block}
.shot.in-review img{opacity:.55}
.shot figcaption{
  position:absolute;left:10px;bottom:10px;
  background:rgba(var(--ink-rgb),.9);color:var(--sand);
  font-size:13px;padding:5px 10px;border-radius:2px;
}

/* ============ composer ============ */
.composer-head{margin-bottom:16px}
.composer-head h2{font-size:17px;font-weight:700;letter-spacing:-.01em}
.composer-head p{font-size:14px;color:var(--sand-dim)}

.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin-bottom:12px}
.pick-tile{
  aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border:1px dashed var(--line);border-radius:var(--r);color:var(--sand-dim);
  font-size:12px;cursor:pointer;text-align:center;padding:6px;
}
.pick-tile:hover{border-color:var(--flare);color:var(--flare)}
.pick-tile input{position:absolute;width:1px;height:1px;opacity:0}
.pick-tile:focus-within{border-color:var(--flare);color:var(--flare)}

.thumb{position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:var(--ink-2);cursor:grab}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.dragging{opacity:.4}
.thumb .lead{
  position:absolute;left:4px;top:4px;background:var(--flare);color:var(--ink);
  font-size:10px;font-weight:700;padding:2px 6px;border-radius:2px;letter-spacing:.04em;
}
.thumb .drop{
  position:absolute;right:4px;top:4px;width:22px;height:22px;border:0;border-radius:50%;
  background:rgba(var(--ink-rgb),.85);color:var(--cream);display:grid;place-items:center;line-height:1;
}
.picks-note{font-size:13px;color:var(--sand-dim);margin-bottom:12px}

.chip{
  display:inline-flex;align-items:center;gap:7px;background:none;
  border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 14px;
  color:var(--sand);font-size:14px;cursor:pointer;
}
.chip:hover{border-color:var(--flare);color:var(--flare)}

.sheet{border:0;padding:0;background:transparent;max-width:min(520px,94vw)}
.sheet::backdrop{background:rgba(var(--ink-rgb),.72)}
.sheet-in{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.sheet-in h3{font-size:18px;font-weight:600;margin-bottom:14px}
.starter-list{list-style:none;display:grid;gap:6px;margin-bottom:16px}
.starter{
  width:100%;display:flex;gap:12px;align-items:flex-start;text-align:left;
  background:none;border:1px solid transparent;border-radius:var(--r);padding:11px 12px;color:var(--cream);
}
.starter:hover{border-color:var(--flare);background:rgba(var(--flare-rgb),.07)}
.starter svg{color:var(--flare);flex:0 0 auto;margin-top:2px}
.starter strong{display:block;font-size:15px;font-weight:600}
.starter em{display:block;font-style:normal;font-size:14px;color:var(--sand-dim);margin-top:2px}

/* ---- avatars ----
   One shape for every avatar: a clipped circle that centres whatever is
   inside it, image or fallback icon. Each use below adds only its size,
   and its colours where it sits on a surface that needs different ones.
   Change the shape here and it changes everywhere. */
.post-avatar,.reply-av,.notif-av,.person-av,.cs-open-av,.rail-me-av,
.story-av,.tray-av,.thread-av,.th-av,.msg-av,.buddy-av,.acct-av,.pf-avatar,.mnav-av{
  display:grid;place-items:center;flex:none;
  overflow:hidden;border-radius:50%;
  background:var(--wine);color:var(--sand);
}
.post-avatar img,.reply-av img,.notif-av img,.person-av img,.cs-open-av img,
.rail-me-av img,.story-av img,.tray-av img,.thread-av img,.th-av img,.msg-av img,
.buddy-av img,.acct-av img,.pf-avatar img,.mnav-av img{
  width:100%;height:100%;object-fit:cover;
}

/* ============ post card ============ */
.post-avatar{width:40px;height:40px;color:rgba(var(--cream-rgb),.55)}
.post-who{flex:1;min-width:0}
.post-name{font-size:16px;font-weight:600;display:flex;align-items:center;gap:5px}
.post-name a{color:var(--cream);text-decoration:none}
.post-name a:hover{color:var(--flare)}
.verified{color:var(--flare);display:inline-flex}
.post-meta{font-size:13px;color:var(--sand-dim)}

.menu{position:relative;flex:0 0 auto}
.menu summary{list-style:none;cursor:pointer;color:var(--sand-dim);padding:4px}
.menu summary::-webkit-details-marker{display:none}
.menu summary:hover{color:var(--cream)}
.menu-pop{
  position:absolute;right:0;top:100%;z-index:30;min-width:190px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);
  padding:5px;display:grid;gap:1px;
}
.menu-pop button{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:none;border:0;color:var(--cream);font-size:14px;padding:9px 10px;border-radius:2px;
}
.menu-pop button:hover{background:rgba(var(--flare-rgb),.12);color:var(--flare)}

.starter-tag{color:var(--flare);font-size:14px;margin-bottom:6px}
.starter-tag a{color:inherit;text-decoration:none}
.starter-tag a:hover{text-decoration:underline}
.post-body{margin-bottom:12px}
.post-body.prompt{font-size:19px;font-weight:600;letter-spacing:-.01em}

/* ---- gallery ---- */
.gal{display:grid;gap:4px;height:100%;grid-auto-rows:1fr;border-radius:var(--r);overflow:hidden}
.gal-2{grid-template-columns:1fr 1fr}
.gal-3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
.gal-3 .tile:first-child{grid-row:span 2}
.gal-4{grid-template-columns:1fr 1fr}
.tile{position:relative;padding:0;border:0;background:var(--ink-2);cursor:zoom-in;overflow:hidden;display:block}
.tile img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}

/* A single photo gets its own aspect, clamped inline by the template
   to somewhere between 4:5 and 1.91:1. Nothing is cut from the file. */

/* Two photos read best as a pair of portraits. Three and four use
   squares, because four 4:5 tiles make a card taller than a screen. */
.more-count{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(var(--ink-rgb),.66);color:var(--cream);font-size:26px;font-weight:700;
}
.tile.in-review img{opacity:.5}
.review-tag{
  position:absolute;left:8px;bottom:8px;background:rgba(var(--ink-rgb),.9);
  color:var(--sand);font-size:12px;padding:4px 8px;border-radius:2px;
}

.post-counts{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--sand-dim);margin-bottom:10px}

.post-acts{display:flex;flex-wrap:wrap;gap:6px;padding-top:10px}
/* Same shape as the reels rail, but on a card rather than video: the
   colour comes from the palette, not white-on-dark. */
.post-acts .act{
  flex:1;display:grid;justify-items:center;gap:3px;
  border:0;border-radius:var(--r);padding:8px 6px;
}
.post-acts .act .act-n{font-size:12px;font-weight:600;min-height:14px}
.post-acts .act-face{width:26px;height:26px;object-fit:contain}
.post-acts .act:hover:not(:disabled){color:var(--flare)}
.post-acts .act.on{color:var(--flare)}
.post-acts .act:disabled{opacity:.5;cursor:default}

/* ---- replies ---- */
.replies{border-top:1px solid var(--line);margin-top:12px;padding-top:14px}
.reply{display:flex;gap:10px;padding:8px 0}
.reply.child{margin-left:34px}
.reply-av{width:28px;height:28px;color:rgba(var(--cream-rgb),.55)}
.reply-in{flex:1;min-width:0}
.reply-who{font-size:14px;font-weight:600}
.reply-who a{color:var(--cream);text-decoration:none}
.reply-body{font-size:15px;margin-top:1px}
.reply-acts{display:flex;gap:14px;margin-top:5px;font-size:13px;color:var(--sand-dim)}
.reply-acts button{background:none;border:0;color:inherit;padding:0;display:inline-flex;align-items:center;gap:5px}
.reply-acts button:hover{color:var(--flare)}
.reply-acts button.on{color:var(--flare)}
.reply-signalled{color:var(--flare);font-size:12px;display:inline-flex;align-items:center;gap:4px;margin-top:4px}

.reply-form{display:flex;gap:8px;margin-top:12px;align-items:flex-end}
.reply-form textarea{
  flex:1;background:transparent;border:1px solid var(--line);border-radius:var(--r);
  padding:10px 12px;color:var(--cream);font:inherit;resize:none;min-height:42px;
}
.reply-form textarea::placeholder{color:var(--sand-dim)}
.reply-form button{
  background:var(--flare);color:var(--ink);border:0;border-radius:var(--r);
  width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;
}
.reply-more{background:none;border:0;color:var(--sand);font-size:14px;padding:6px 0}
.reply-more:hover{color:var(--flare)}

/* ---- lightbox ---- */
/* Anything that covers the page. Saying it once means no component
   can forget that hidden means hidden. */
.overlay{position:fixed;inset:0}

/* The attribute wins. Components set display for their own layout;
   without this each one has to remember what hidden means, and
   the one that forgets renders over the page. */

.lb{position:fixed;inset:0;background:rgba(var(--ink-rgb),.96);z-index:80;display:none;place-items:center}
.lb.open{display:grid}
.lb img{max-width:94vw;max-height:86vh;object-fit:contain}
.lb-close,.lb-prev,.lb-next{
  position:absolute;background:rgba(var(--cream-rgb),.1);border:0;color:var(--cream);
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
}
.lb-close{top:18px;right:18px}
.lb-prev{left:14px;top:50%;translate:0 -50%}
.lb-next{right:14px;top:50%;translate:0 -50%}
.lb-count{position:absolute;bottom:22px;left:50%;translate:-50% 0;font-size:14px;color:var(--sand)}

/* ---- notifications ---- */
.nav-notif{position:relative}
.dot{
  background:var(--flare);color:var(--ink);font-size:11px;font-weight:700;
  border-radius:10px;padding:1px 6px;margin-left:5px;
}
.notif-list{list-style:none;display:grid}
.notif{display:flex;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.notif-av{width:40px;height:40px}
.notif-text{flex:1;font-size:15px}
.notif-text a{margin-left:8px}
.notif-when{font-size:13px;color:var(--sand-dim);flex:0 0 auto}
.notif.mutual{background:rgba(var(--flare-rgb),.06);padding-inline:12px}

@media (max-width:600px){
  .post-acts .act{padding:8px 4px}
}

/* ============ reels ============ */
.reels{
  height:100dvh;overflow-y:scroll;scroll-snap-type:y mandatory;
  background:#000;margin:0;scrollbar-width:none;
}
.reels::-webkit-scrollbar{display:none}
body:has(.reels){overflow:hidden}

.reel{
  position:relative;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;
  display:grid;place-items:center;overflow:hidden;
}
.reel-video{width:100%;height:100%;object-fit:contain;background:#000}
.reel-shade{
  position:absolute;inset:auto 0 0 0;height:42%;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.78),transparent);
}

.reel-info{position:absolute;left:16px;right:84px;bottom:calc(24px + env(safe-area-inset-bottom))}
.reel-who{font-size:17px;font-weight:600}
.reel-who a{color:#fff;text-decoration:none}
.reel-loc{font-size:13px;color:rgba(255,255,255,.7)}
.reel-cap{font-size:15px;color:rgba(255,255,255,.92);margin-top:8px;max-width:34ch}

.reel-rail{
  position:absolute;right:12px;bottom:calc(28px + env(safe-area-inset-bottom));
  display:grid;gap:18px;justify-items:center;
}
.rail-btn{
  background:none;border:0;color:#fff;display:grid;justify-items:center;gap:3px;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));padding:2px;
}
.rail-btn span{font-size:12px;font-weight:600;min-height:14px}
.rail-btn.on{color:var(--flare)}
.rail-btn:disabled{opacity:.5}

.reel-back,.reel-add{
  position:fixed;z-index:40;width:42px;height:42px;border-radius:50%;border:0;
  background:rgba(0,0,0,.45);color:#fff;display:grid;place-items:center;
  backdrop-filter:blur(6px);text-decoration:none;
}
.reel-back{left:12px;top:calc(12px + env(safe-area-inset-top))}
.reel-add{right:12px;top:calc(12px + env(safe-area-inset-top));background:var(--flare);color:var(--ink)}

.reel-replies{
  position:absolute;left:0;right:0;bottom:0;max-height:62dvh;overflow-y:auto;
  background:var(--ink);border-top:1px solid var(--line);
  padding:14px 16px calc(16px + env(safe-area-inset-bottom));margin:0;z-index:30;
}

.reel-empty{
  height:100dvh;display:grid;place-content:center;justify-items:center;gap:14px;
  text-align:center;padding:24px;
}

#reel-form{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}
.sheet-in textarea{
  width:100%;background:transparent;border:1px solid var(--line);border-radius:var(--r);
  padding:10px 12px;color:var(--cream);font:inherit;resize:none;margin-block:10px;
}
.sheet-acts{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}

.nav-reels{display:inline-flex;align-items:center;gap:6px}

/* ============ recorder ============ */
.rec{z-index:70;background:#000;display:grid;place-items:center}

/* Everything is shot 9:16. The frame shows exactly what will be
   posted, so a desktop webcam is cropped on screen rather than
   surprising the user after upload. */
.rec-frame{
  position:relative;aspect-ratio:9/16;
  height:min(100dvh,calc(100vw * 16 / 9));
  max-height:100dvh;background:#000;overflow:hidden;
}
.rec-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
/* mirroring is set in JS: front camera only */

.rec-top{
  position:absolute;top:calc(12px + env(safe-area-inset-top));left:12px;right:12px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.rec-icon{
  width:42px;height:42px;border:0;border-radius:50%;
  background:rgba(0,0,0,.45);color:#fff;display:grid;place-items:center;
  backdrop-filter:blur(6px);
}
.rec-timer{
  background:var(--flare);color:var(--ink);font-size:13px;font-weight:700;
  padding:5px 12px;border-radius:20px;font-variant-numeric:tabular-nums;
}

.rec-bar{position:absolute;left:0;right:0;top:0;height:3px;background:rgba(255,255,255,.2)}
.rec-bar span{display:block;height:100%;width:0;background:var(--flare);transition:width .2s linear}

.rec-bottom{
  position:absolute;left:0;right:0;bottom:calc(30px + env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:center;gap:16px;padding-inline:24px;
}
#rec-controls{justify-content:space-between}
.rec-spacer{width:42px}

.rec-shutter{
  width:74px;height:74px;border-radius:50%;border:4px solid #fff;
  background:transparent;display:grid;place-items:center;padding:0;
}
.rec-shutter span{
  width:56px;height:56px;border-radius:50%;background:var(--flare);
  transition:border-radius .2s,width .2s,height .2s;
}
.rec-shutter.on span{width:28px;height:28px;border-radius:6px}

.rec-hint{
  position:absolute;left:0;right:0;bottom:calc(112px + env(safe-area-inset-bottom));
  text-align:center;font-size:13px;color:rgba(255,255,255,.75);
}

/* ---- reel card inside the feed ---- */
.composer-tools{display:flex;gap:8px;flex-wrap:wrap}
.feed-reel{position:relative;height:100%;border-radius:var(--r);background:#000 center/cover no-repeat}
.feed-video{width:100%;height:100%;object-fit:cover;object-position:50% 30%;background:transparent;display:block;border-radius:inherit}
.feed-video{opacity:1}
/* Catches the tap before Safari's own play control can swallow it. */
.feed-tap{position:absolute;inset:0}
.feed-reel-tag{
  position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;gap:5px;
  background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:600;
  padding:4px 9px;border-radius:20px;backdrop-filter:blur(4px);
}
.feed-sound{
  position:absolute;right:10px;bottom:10px;width:34px;height:34px;border:0;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;backdrop-filter:blur(4px);
}
.feed-sound.on{background:var(--flare);color:var(--ink)}

/* ============ profile ============ */

.pf-avatar{position:relative;width:104px;height:104px;color:rgba(var(--cream-rgb),.5)}
.pf-avatar-edit{
  position:absolute;right:2px;bottom:2px;width:30px;height:30px;border:0;
  border-radius:50%;background:var(--flare);color:var(--ink);
  display:grid;place-items:center;
}

.pf-id{min-width:0}
.pf-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;color:var(--sand-dim);margin-top:3px}
.pf-bio{font-size:15px;margin-top:12px;max-width:58ch}

.pf-acts .btn.on,.pf-acts .btn:disabled{background:none;border:1px solid var(--line);color:var(--flare)}
.pf-menu summary{width:34px;height:34px;border:1px solid var(--line);border-radius:var(--r-pill);display:grid;place-items:center}

.pf-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 22px}
.pf-tabs a{
  padding:13px 16px;font-size:15px;text-decoration:none;color:var(--sand);
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.pf-tabs a:hover{color:var(--cream)}
.pf-tabs a.on{color:var(--flare);border-bottom-color:var(--flare)}

/* The back link is the way out of a profile: without the site nav
   beside it, nothing else leads off this page. */
.rail-back{margin-bottom:8px;color:var(--sand-dim)}
.rail-back:hover{color:var(--cream)}
/*
* The left column, on every page that has one: the site nav on most,
* the profile card and its nav on a profile.
*
* Sticky under the header, and scrolling on its own only when the
* content is taller than the screen - without the max-height the last
* links on a short screen can never be reached, and with an
* unconditional overflow the column scrolls when it does not need to.
*/
.rail,
.pf-aside{
  position:sticky;top:71px;
  max-height:calc(100vh - 76px);overflow-y:auto;
  scrollbar-width:none;overscroll-behavior:contain;
  padding-block:19px 24px;
}
.rail::-webkit-scrollbar,
.pf-aside::-webkit-scrollbar{display:none}

.rail{display:grid;gap:1px}
.pf-aside{display:grid;gap:16px;align-content:start}
.pf-aside .rail{position:static;max-height:none;overflow:visible;padding-block:0}

button.rail-link{width:100%;background:none;border:0;text-align:left;font:inherit;cursor:pointer}

/* Profile: a column of cards about the person, then the content.
   The wider left column is what lets the card hold a centred avatar,
   the stats row and the actions without cramping any of them. */
.pf-media{padding-block:32px;position:sticky;top:76px}

.pf-card{padding:22px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);text-align:center}
.pf-card .pf-avatar{width:112px;height:112px;margin:0 auto 14px}
.pf-name{display:flex;align-items:center;justify-content:center;gap:7px;font-size:22px;font-weight:700;letter-spacing:-.02em}
.pf-handle{margin-top:2px;font-size:14px;color:var(--sand-dim)}
.pf-card .pf-bio{margin-top:12px;font-size:15px}
.pf-card .pf-fact{justify-content:center;margin-top:8px}

.pf-acts{display:grid;gap:8px;margin-top:18px}
.pf-acts .btn{width:100%}

.pf-nav{padding:8px;text-align:left}
.pf-content{padding:0}
.pf-content-h{margin:0 0 18px;font:600 19px/1.2 var(--font);color:var(--cream)}

@media (max-width:900px){
  /* One column: a sticky card would pin itself over the content
     scrolling beneath it. The card itself is dropped here - the header
     already carries the avatar, and the nav keeps Edit profile. */
  .pf-aside{position:static;max-height:none;overflow:visible}
  .pf-aside .pf-card:not(.pf-nav){display:none}
}

.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.pf-cell{position:relative;aspect-ratio:1;display:block;background:var(--ink-2);overflow:hidden;border-radius:2px}
.pf-cell img{width:100%;height:100%;object-fit:cover}
.pf-cell-blank{display:grid;place-items:center;height:100%;color:var(--sand-dim)}
.pf-cell-tag{position:absolute;right:6px;top:6px;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
.reels-grid .pf-cell{aspect-ratio:9/16}

@media (max-width:760px){
  .pf-head{grid-template-columns:auto minmax(0,1fr);gap:16px;row-gap:18px}
  .pf-avatar{width:76px;height:76px}
  .pf-name{font-size:21px}
  .pf-acts{grid-column:1 / -1;justify-content:flex-start}
  .pf-tabs a{flex:1;text-align:center;padding-inline:8px}
  .reels-grid{grid-template-columns:repeat(2,1fr)}
}

/* ============ trim ============ */
.trim{z-index:75;background:#000;display:flex;flex-direction:column}
.trim-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(12px + env(safe-area-inset-top)) 12px 12px;
}
.trim-len{
  background:rgba(255,255,255,.12);color:#fff;font-size:13px;font-weight:700;
  padding:5px 12px;border-radius:20px;font-variant-numeric:tabular-nums;
}
.trim-len.over{background:var(--flare);color:var(--ink)}

.trim-frame{
  flex:1;min-height:0;display:grid;place-items:center;overflow:hidden;
}
.trim-video{
  aspect-ratio:9/16;height:100%;max-width:100%;
  object-fit:cover;background:#000;
}

.trim-panel{padding:16px 16px calc(24px + env(safe-area-inset-bottom))}
.trim-hint{font-size:13px;color:rgba(255,255,255,.65);text-align:center;margin-bottom:14px}

.trim-track{
  position:relative;height:52px;border-radius:var(--r);
  background:rgba(255,255,255,.12);touch-action:none;
}
.trim-sel{
  position:absolute;top:0;bottom:0;left:0;width:100%;
  border:2px solid var(--flare);border-radius:var(--r);
  background:rgba(var(--flare-rgb),.16);
}
.trim-grip{
  position:absolute;top:-2px;bottom:-2px;width:22px;border:0;
  background:var(--flare);cursor:ew-resize;touch-action:none;
}
.trim-grip::after{
  content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:2px;height:18px;background:var(--ink);border-radius:2px;
  box-shadow:4px 0 0 var(--ink),-4px 0 0 var(--ink);
}
.trim-grip.left{left:-2px;border-radius:var(--r) 0 0 var(--r)}
.trim-grip.right{right:-2px;border-radius:0 var(--r) var(--r) 0}

.trim-play{position:absolute;top:0;bottom:0;width:2px;background:#fff;pointer-events:none;opacity:.9}

.trim-times{
  display:flex;justify-content:space-between;margin-top:10px;
  font-size:12px;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums;
}

/* three buttons after recording need a little more room */
#rec-done{gap:10px;flex-wrap:wrap}
#rec-done .btn{min-width:88px}

/* ---- guest feed on the landing page ---- */
.lp-hero.slim{padding-block:44px 32px;margin-bottom:28px}
.lp-hero.slim h1{font-size:clamp(30px,4.4vw,44px)}
.lp-hero.slim .lead{margin-top:12px;font-size:17px}
.lp-hero.slim .lp-cta{margin-top:22px}

.guest-stream .post-acts .act{text-decoration:none}

.lp-feed-end{
  display:grid;justify-items:center;gap:14px;text-align:center;
  padding-block:56px 80px;border-top:1px solid var(--line);margin-top:28px;
}

/* ============ app frame: rail + column ============ */
.frame{
  width:min(1180px,100% - var(--pad)*2);margin-inline:auto;
  display:grid;--c-left:260px;--c-right:240px;--c-gap:32px;grid-template-columns:var(--c-left) minmax(0,1fr);gap:var(--c-gap);
  align-items:start;
}
.col{padding-block:0 80px;max-width:600px;width:100%}

/* The feed carries a third column, but only where there is room for it.
   Scoped to a min-width: .frame:has() outranks .frame, so setting this
   unconditionally would beat the narrow-screen rules further down. */
@media (min-width:1101px){
  .frame:has(>main+*){grid-template-columns:var(--c-left) minmax(0,1fr) var(--c-right)}
}
.col-wide{max-width:none}

/* ---- left rail ---- */
.rail-link{
  display:flex;align-items:center;gap:12px;position:relative;
  padding:9px 14px;border-radius:var(--r);
  color:var(--sand);text-decoration:none;font-size:15px;
}
.rail-link:hover{background:rgba(var(--cream-rgb),.04);color:var(--cream)}
/* A line at the edge says where you are without a block of colour. */
.rail-link.on{color:var(--flare);background:none}
.rail-link.on::before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:2px;border-radius:2px;background:var(--flare)}
.rail-link svg{opacity:.75}
.rail-link.on svg,.rail-link:hover svg{opacity:1}
.rail-link svg{flex:0 0 auto}
.rail-dot{
  margin-left:auto;background:var(--flare);color:var(--ink);
  font-style:normal;font-size:11px;font-weight:700;
  padding:1px 7px;border-radius:10px;
}

/* ---- account menu ---- */
.acct{position:relative}
.acct summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  padding:5px 6px 5px 5px;border-radius:24px;border:1px solid transparent;
}
.acct summary::-webkit-details-marker{display:none}
.acct summary:hover{border-color:var(--line)}
.acct[open] summary{border-color:var(--line)}
/* One circular icon button, shared by the menu toggle and every
   close control, so there is a single style to change. */
.btn-round{
  display:grid;place-items:center;width:38px;height:38px;flex:none;
  padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(var(--cream-rgb),.06);color:var(--cream);
}
.btn-round:hover{background:rgba(var(--cream-rgb),.12)}
/* .acct summary sets flex + padding for the old avatar row; the round
   button needs neither, and outranks it only when scoped this way. */
.acct summary.btn-round{display:grid;place-items:center;padding:0;gap:0;border:0}
.acct summary.btn-round svg{display:block}
.acct[open] .btn-round{border-color:transparent}
/* Both icons ship; only one shows. No reflow on toggle. */
.acct .ico-close,.acct[open] .ico-menu{display:none}
.acct[open] .ico-close{display:block}
.acct-me{border-bottom:1px solid var(--line);margin-bottom:4px;padding-bottom:12px!important}

.acct-av{width:30px;height:30px;color:rgba(var(--cream-rgb),.6)}
.acct-av svg{width:18px;height:18px}
.acct-name{font-size:15px;color:var(--cream);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.acct-pop{
  position:absolute;right:0;top:calc(100% + 8px);min-width:230px;z-index:40;
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);
  padding:5px;display:grid;gap:1px;
}
.acct-pop a,.acct-pop button{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:0;color:var(--cream);font-size:15px;
  padding:10px 11px;border-radius:2px;text-decoration:none;
}
.acct-pop a:hover,.acct-pop button:hover{background:rgba(var(--flare-rgb),.12);color:var(--flare)}
.acct-pop form{display:contents}
.acct-pop form::before{
  content:"";display:block;height:1px;background:var(--line);margin:4px 0;
}

/* ---- mobile: rail becomes a bottom bar ---- */
@media (max-width:900px){
  .frame{grid-template-columns:1fr;gap:0}
  .col{padding-block:0 92px;max-width:none;margin-inline:auto;min-width:0}

  .rail{display:none}
  .rail-dot{
    position:absolute;top:4px;left:50%;margin:0;translate:2px 0;
    font-size:10px;padding:0 5px;
  }
  .acct-name{display:none}
}

/* ---- settings ---- */
.set-sec{padding-block:28px;border-bottom:1px solid var(--line)}
.set-sec:last-child{border-bottom:0}
.set-sec h2{font-size:19px;font-weight:600;margin-bottom:6px}
.set-sec .form{margin-top:14px}
.saved{color:var(--gold)}

.field textarea{
  background:transparent;border:1px solid rgba(var(--sand-rgb),.4);border-radius:var(--r);
  padding:12px 14px;color:var(--cream);font:inherit;resize:vertical;
}

.check{display:flex;gap:12px;align-items:flex-start;padding:12px 0;cursor:pointer}
.check input{margin-top:3px;accent-color:var(--flare);width:17px;height:17px;flex:0 0 auto}
.check strong{display:block;font-size:15px;font-weight:500}
.check em{display:block;font-style:normal;font-size:14px;color:var(--sand-dim);margin-top:2px;max-width:46ch}

.blocked-list{list-style:none;display:grid;gap:2px}
.blocked-list li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.blocked-list em{font-style:normal;color:var(--sand-dim)}

/* reactions */
.flirt-wrap{position:relative;flex:1;display:grid}
.act-react{width:18px;height:18px;object-fit:contain}
.flirt-pick{position:absolute;bottom:calc(100% + 8px);left:0;z-index:30;display:flex;gap:2px;padding:8px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 8px 28px rgba(0,0,0,.5)}
.flirt-opt{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:56px;padding:6px 4px;background:none;border:0;border-radius:var(--r);color:var(--sand-dim);font:400 11px/1 var(--font);cursor:pointer}
.flirt-opt img{width:40px;height:40px;object-fit:contain;transition:transform .12s ease}
.flirt-opt:hover img,.flirt-opt:focus-visible img{transform:scale(1.18)}
.flirt-opt.on{background:rgba(var(--flare-rgb),.12);color:var(--flare)}

/* Six 56px columns overflow a 380px screen. Scroll rather than wrap:
   a second row would push the picker over the post above it. */
@media (max-width:480px){
  .flirt-pick{left:0;transform:none;max-width:min(360px,calc(100vw - 32px));overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
  .flirt-pick::-webkit-scrollbar{display:none}
  .flirt-opt{min-width:52px}
  .flirt-opt img{width:36px;height:36px}
}

/* match moment */
.flirt-match{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:var(--pad);background:rgba(var(--ink-rgb),.82)}
.flirt-match-in{max-width:340px;padding:32px 28px;text-align:center;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r)}
.fm-title{margin:0 0 8px;font:600 26px/1.2 var(--font);color:var(--flare);letter-spacing:-.01em}
.fm-body{margin:0 0 24px;color:var(--cream)}
.fm-close{display:block;width:100%;margin:12px 0 0;padding:8px;background:none;border:0;color:var(--sand-dim);font:400 14px/1 var(--font);cursor:pointer}
/* sticker comments */
.reply-row{display:flex;align-items:flex-end;gap:8px}
.reply-tools{display:flex;gap:2px;margin-top:6px}
.sticker-btn{padding:4px;background:none;border:0;border-radius:var(--r);line-height:0;cursor:pointer;opacity:.72;transition:opacity .12s ease,transform .12s ease}
.sticker-btn:hover,.sticker-btn:focus-visible{opacity:1;transform:scale(1.12)}
.sticker-btn.on{opacity:1;background:rgba(var(--flare-rgb),.14)}
.sticker-btn img{width:28px;height:28px;object-fit:contain}
.reply-chosen{position:relative;display:inline-block;margin:0 0 8px}
.reply-chosen img{width:56px;height:56px;object-fit:contain}
.reply-chosen-x{position:absolute;top:-6px;right:-6px;width:20px;height:20px;padding:0;background:var(--ink);border:1px solid var(--line);border-radius:50%;color:var(--sand);font:400 14px/1 var(--font);cursor:pointer}
.reply-sticker{display:block;width:72px;height:72px;object-fit:contain;margin:4px 0 0}
.reply-gif{display:block;max-width:220px;border-radius:var(--r);margin:4px 0 0}
.post-who{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px}
.post-who .post-name{margin:0}
.post-who .post-meta{flex:0 0 100%;margin:0}
/* people lists */
.people{list-style:none;display:grid;gap:2px}
.person{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.person-who{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;min-width:0}
.person-av{width:40px;height:40px}
.person-who strong{display:block;font-weight:600}
.person-who em{display:block;font-style:normal;font-size:14px;color:var(--sand-dim)}
.person-acts{display:flex;gap:8px;flex:0 0 auto}
.notif-acts{display:flex;gap:8px;margin-left:auto}
.page-h2{margin:24px 0 8px;font:600 17px/1.3 var(--font);color:var(--cream)}
/* Shape comes from .btn-round; this only adds what is bell-specific. */
.head-bell{position:relative}
.head-bell.on{color:var(--flare)}
.head-dot{position:absolute;top:4px;right:2px;min-width:16px;padding:0 4px;background:var(--flare);border-radius:var(--r-pill);color:var(--ink);font:700 11px/16px var(--font);font-style:normal;text-align:center}
.head-acts{display:flex;align-items:center;gap:6px}

/* bell panel: its own scroll, so a long history does not push the
   page around or stretch the panel past the viewport */
.bell-pop{width:340px;max-width:calc(100vw - 24px);padding:0}
.bell-head{padding:14px 16px 10px;font:600 17px/1 var(--font);color:var(--cream)}
.bell-list{max-height:min(420px,60vh);overflow-y:auto;overscroll-behavior:contain;padding:0 6px 6px}
.bell-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r);color:var(--sand);text-decoration:none}
.bell-row:hover{background:rgba(var(--cream-rgb),.05);color:var(--cream)}
.bell-row.unread{color:var(--cream)}
.bell-row .notif-av{flex:0 0 34px;width:34px;height:34px}
.bell-text{flex:1;min-width:0;font-size:14px;line-height:1.35}
.bell-text em{display:block;font-style:normal;font-size:12px;color:var(--sand-dim);margin-top:1px}
.bell-new{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--flare)}
.bell-empty{padding:24px 10px;text-align:center;color:var(--sand-dim);font-size:14px}
.bell-all{display:block;padding:12px;border-top:1px solid var(--line);text-align:center;color:var(--flare);text-decoration:none;font-size:14px}
.bell-all:hover{background:rgba(var(--flare-rgb),.08)}

/* Mobile nav: its own element, rendered on every page. A floating pill
   rather than a bar welded to the bottom edge - it reads as a control
   sitting on the page. */
.mobile-nav{display:none;transition:translate .22s ease,opacity .22s ease}

@media (max-width:900px){
  /* Separate buttons, not one pill: each action is its own thing to
     hit, and the picture shows between them. */
  .mobile-nav{
    position:fixed;left:50%;translate:-50% 0;
    bottom:calc(12px + env(safe-area-inset-bottom));z-index:30;
    display:flex;gap:12px;padding:0;
    background:none;border:0;box-shadow:none;
  }
  .mnav-link{
    position:relative;display:grid;place-items:center;
    width:52px;height:52px;border-radius:50%;color:var(--cream);
    background:rgba(var(--ink-rgb),.72);border:1px solid var(--line);
    box-shadow:0 6px 18px rgba(0,0,0,.4);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    /* Buttons and links sit side by side in here, so the button's own
       chrome has to go or only half the bar looks flat. */
    padding:0;cursor:pointer;
  }
  .mnav-link.on{background:rgba(var(--flare-rgb),.14);color:var(--flare)}
  .mnav-link.on svg path{fill:currentColor}
  .mnav-dot{
    position:absolute;top:9px;right:11px;width:8px;height:8px;
    border-radius:50%;background:var(--flare);
  }
}

/* composer sheet */
.composer-sheet{z-index:60;background:var(--ink);overflow-y:auto}
.cs-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--ink);border-bottom:1px solid var(--line);font:600 17px/1 var(--font);color:var(--cream)}
.cs-close{background:none;border:0;color:var(--sand);font-size:28px;line-height:1;cursor:pointer;padding:0 4px}
.cs-close:hover{color:var(--flare)}
.cs-body{width:min(600px,100% - 32px);margin-inline:auto;padding-block:20px 80px}
.cs-body .composer{background:none;border:0;padding:0}

.cs-open{display:flex;align-items:center;gap:12px;width:100%;margin-bottom:20px;padding:14px 16px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-pill);color:var(--sand-dim);font:inherit;text-align:left;cursor:pointer}
.cs-open:hover{border-color:var(--flare);color:var(--cream)}
.cs-open-av{width:34px;height:34px}

.mnav-post{background:var(--flare);border:0;color:var(--ink);cursor:pointer;padding:0}
.mnav-post:hover{background:var(--gold)}
.mnav-soon{background:none;border:0;padding:0;color:var(--sand);cursor:default;opacity:1;-webkit-appearance:none;appearance:none}
.mnav-av{width:28px;height:28px}
.mnav-link.on .mnav-av{outline:2px solid var(--flare);outline-offset:1px}

/* avatars that were placeholder-only until now */

@media (max-width:900px){
}

/* The post header sits over the foot of the media rather than above
   it: with a tall frame there is no reason to spend a row of the
   screen on a name.

   It has to match the media's own edges - the media breaks out of the
   page gutter on a phone, so the header follows it rather than sitting
   inset by the width of that gutter. */
.card.post{position:relative}

/* Matched to the conversation's avatars below: at 38px the person who
   posted read as smaller than each message they had sent. */
.card.post .post-avatar{
  width:var(--post-avatar-h);
  height:var(--post-avatar-h);
  flex:0 0 var(--post-avatar-h);
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.85);
}

@media (max-width:900px){
  .feed-sound{bottom:auto;top:12px;right:12px}
  .card.post{border-bottom:0}
}
.rail-me{display:flex;align-items:center;gap:11px;padding:11px 14px;margin-bottom:6px;border-radius:var(--r);color:inherit;text-decoration:none;min-width:0}
.rail-me:hover{background:rgba(var(--cream-rgb),.05)}
.rail-me-av{width:38px;height:38px}
.rail-me-who{min-width:0}
.rail-me-who strong{display:block;font-weight:600;color:var(--cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-me-who em{display:block;font-style:normal;font-size:13px;color:var(--flare)}

/* reel tray */
.tray{margin:0 0 22px}
.tray-scroll{
  display:flex;gap:10px;overflow-x:auto;
  scroll-snap-type:x proximity;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.tray-scroll::-webkit-scrollbar{display:none}
.tray-card{
  position:relative;flex:0 0 128px;aspect-ratio:9/16;
  scroll-snap-align:start;border-radius:var(--r);overflow:hidden;
  background:var(--ink-2);text-decoration:none;display:block;
}
.tray-card > img{width:100%;height:100%;object-fit:cover;display:block}
.tray-card::after{
  content:'';position:absolute;inset:auto 0 0 0;height:60%;
  background:linear-gradient(rgba(var(--ink-rgb),0),rgba(var(--ink-rgb),.85));
}
.tray-av{
  position:absolute;top:8px;left:8px;z-index:1;
  width:30px;height:30px;outline:2px solid var(--flare);
}
.tray-name{
  position:absolute;left:8px;right:8px;bottom:8px;z-index:1;
  font-size:13px;font-weight:600;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* The tray breaks out of the gutter like the post media does, so the
   row runs to the screen edge and reads as scrollable. */
@media (max-width:900px){
  .tray-scroll{
    margin-inline:calc(var(--pad) * -1);
    padding-inline:var(--pad);
  }
  .tray-card{flex-basis:112px}
}
/* reel progress */
.reel-bar{position:absolute;top:calc(8px + env(safe-area-inset-top));left:12px;right:12px;z-index:3;height:3px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden}
.reel-bar i{display:block;height:100%;width:0;background:#fff;border-radius:2px;transition:width .28s linear}
/* timeupdate fires a few times a second, so the bar arrives in steps.
   The transition rides between them. It is linear and slightly longer
   than the gap, so the fill keeps moving rather than easing to a stop
   between each update. */

/* the create-story card: the one tile that is always there, so the
   row never renders as an empty strip */
.tray-new{position:relative;border:0;padding:0;cursor:pointer;text-align:left}
.tray-new > img{opacity:.55}
.tray-plus{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:1;
  display:grid;place-items:center;width:42px;height:42px;
  border-radius:50%;background:var(--flare);color:var(--ink);
  font:700 24px/1 var(--font);
}
.tray-new .tray-name{text-align:center}
.rail-create{width:100%;margin-top:14px;justify-content:center}

/* ============ stories ============ */
.stories{height:100dvh;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;background:#000}
.stories::-webkit-scrollbar{display:none}
body:has(.stories){overflow:hidden}

.story-set{position:relative;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always}

/* The strip is the horizontal axis: one person's stories, snapped. */
.story-strip{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.story-strip::-webkit-scrollbar{display:none}
.story{flex:0 0 100%;height:100%;scroll-snap-align:start;display:grid;place-items:center;background:#000}
.story-img,
.story-video{width:100%;height:100%;object-fit:contain;display:block}

/* One segment per story, so how many are left is visible at a glance. */
.story-bars{position:absolute;top:calc(10px + env(safe-area-inset-top));left:12px;right:12px;z-index:4;display:flex;gap:3px}
.story-bar{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden}
.story-bar i{display:block;height:100%;width:0;background:#fff;border-radius:2px}

.story-head{position:absolute;top:calc(24px + env(safe-area-inset-top));left:12px;right:56px;z-index:4;display:flex;align-items:center;gap:10px}
.story-av{width:34px;height:34px}
.story-who{color:#fff;font-weight:600;text-decoration:none;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.story-when{color:rgba(255,255,255,.7);font-size:13px}

/* Tap targets, not buttons you can see. They sit below the header so
   the name and avatar stay clickable. */
.story-tap{position:absolute;top:0;bottom:0;width:32%;z-index:3;background:none;border:0;cursor:pointer}
.story-prev{left:0}
.story-next{right:0}

/* ============ messages ============ */
.thread-list{list-style:none;display:grid;gap:2px}
.thread{
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;
  padding:11px 12px;border-radius:var(--r);text-decoration:none;color:inherit;
}
.thread:hover{background:var(--ink-2)}
.thread-av{width:46px;height:46px;background:var(--ink-2);color:var(--sand-dim)}
.thread-who{min-width:0;display:grid;gap:2px}
.thread-name{font-weight:600;color:var(--cream)}
.thread-last{
  font-size:14px;color:var(--sand-dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.thread.unread .thread-last{color:var(--cream)}
.thread-when{font-size:12px;color:var(--sand-dim);white-space:nowrap}
.thread-dot{width:8px;height:8px;border-radius:50%;background:var(--flare)}

.th-head{
  display:flex;align-items:center;gap:10px;padding-bottom:12px;
  border-bottom:1px solid var(--line);margin-bottom:14px;
}
.th-back{color:var(--cream);display:grid;place-items:center}
.th-who{display:flex;align-items:center;gap:9px;color:var(--cream);text-decoration:none;font-weight:600}
.th-av{width:32px;height:32px;background:var(--ink-2);color:var(--sand-dim)}

.th-log{display:grid;gap:8px;align-content:start;padding-bottom:14px}
.msg{
  justify-self:start;
  display:flex;align-items:flex-end;gap:8px;
  max-width:min(82%,520px);
}
.msg.mine{
  justify-self:end;
  flex-direction:row-reverse;
}
.msg-av{
  width:30px;height:30px;
  background:var(--wine);color:var(--sand-dim);
}
.msg-bubble{
  max-width:460px;
  background:var(--ink-2);padding:9px 13px;
  border-radius:16px 16px 16px 4px;
}
.msg.mine .msg-bubble{
  background:var(--flare);color:#fff;
  border-radius:16px 16px 4px 16px;
}
.msg p{font-size:15px;line-height:1.4;overflow-wrap:anywhere}
.msg-when{display:block;font-size:11px;opacity:.65;margin-top:3px}

.th-send{
  position:fixed;
  bottom:0;
  z-index:20;
  width:min(600px,calc(100vw - (var(--pad) * 2)));
  background:var(--ink);
  padding:10px 0;
}
@media (min-width:901px){
  .th-send{
    left:max(
      var(--pad),
      calc((100vw - min(1180px,100vw - (var(--pad) * 2))) / 2 + 292px)
    );
  }
}
@media (max-width:900px){
  .th-send{
    left:var(--pad);
    right:var(--pad);
    width:auto;
    bottom:0;
  }
}
.th-send-box{
  position:relative;
}
.th-send input{
  width:100%;
  background:var(--ink-2);
  border:1px solid var(--line);
  color:var(--cream);
  padding:11px 52px 11px 14px;
  border-radius:var(--r-pill);
  font:inherit;
  box-sizing:border-box;
}
.th-send input:focus{
  outline:2px solid var(--flare);
  outline-offset:-1px;
}
.th-send-btn{
  position:absolute;
  right:5px;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--flare);
  color:#fff;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  padding:0 0 2px;
}
.th-send-btn:hover{
  filter:brightness(1.05);
}
.th-send-btn:focus-visible{
  outline:2px solid var(--cream);
  outline-offset:2px;
}

/* ============ flirt buddies rail ============ */
.buddies{padding-block:30px 24px;position:sticky;top:71px}
.buddies-card{
  background:var(--ink-2);border:1px solid var(--line);
  border-radius:14px;padding:16px 12px;
}
.buddies-h{
  font:600 16px/1 var(--font);color:var(--cream);
  margin-bottom:14px;padding-inline:6px;
}
.buddies-none{font-size:14px;color:var(--sand-dim);padding-inline:6px;line-height:1.5}
.buddy-list{list-style:none;display:grid;gap:2px}
.buddy{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  padding:7px 6px;border-radius:10px;text-decoration:none;color:var(--cream);
}
.buddy:hover{background:rgba(var(--cream-rgb),.06)}
/* The remove control stays out of the way until the row is under the
   cursor: it is a rare action next to a common one. */
.buddy-x{
  background:none;border:0;padding:2px 6px;font-size:20px;line-height:1;
  color:var(--sand-dim);cursor:pointer;opacity:0;transition:opacity .12s ease;
}
.buddy:hover .buddy-x,.buddy-x:focus-visible{opacity:1}
.buddy-x:hover{color:var(--flare)}
.buddy .buddy-dot{display:inline-block;margin-left:6px;vertical-align:middle}
.buddy-av{
  position:relative;width:44px;height:44px;
  background:var(--ink);color:var(--sand-dim);
  box-shadow:0 0 0 2px var(--flare);
}
/* Presence sits beside the avatar rather than inside it — .buddy-av
   clips to a circle and would clip this with it. Green, not coral:
   coral is the unread dot, and one colour cannot mean two things. */
.buddy-slot{position:relative;display:grid;flex:none}
.buddy-on{
  position:absolute;right:0;bottom:1px;
  width:12px;height:12px;border-radius:50%;
  background:#3FD07A;box-shadow:0 0 0 2px var(--ink-2);
}
.buddy-name{
  display:grid;gap:1px;min-width:0;
  font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--cream);text-decoration:none;
}
.buddy.unread .buddy-name{font-weight:600}
/* Two lines in 240px: who, then what they said and when. */
.buddy-last{
  font-size:13px;color:var(--sand-dim);font-weight:400;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.buddy-when{font-style:normal;margin-left:6px;color:var(--sand-dim);opacity:.7}
.buddy-dot{width:7px;height:7px;border-radius:50%;background:var(--flare)}

/* Below this the third column would squeeze the feed, and /messages is
   the better experience on a narrow screen anyway. */
@media (max-width:1100px){
  .buddies{display:none}
}

/* ---- buddies: tabs and discovery ---- */
.bd-tabs{display:grid;grid-template-columns:1fr 1fr;margin-bottom:12px}
.bd-tab{
  background:none;border:0;border-bottom:2px solid var(--line);
  padding:8px 4px;font:inherit;font-size:14px;color:var(--sand-dim);cursor:pointer;
}
.bd-tab.on{color:var(--flare);border-bottom-color:var(--flare)}
.bd-search{
  display:flex;align-items:center;gap:8px;margin-bottom:12px;
  padding:8px 12px;border-radius:var(--r-pill);
  background:var(--ink);border:1px solid var(--line);color:var(--sand-dim);
}
.bd-search input{
  flex:1;min-width:0;background:none;border:0;color:var(--cream);font:inherit;font-size:14px;
}
.bd-search input:focus{outline:none}
.bd-label{font-size:13px;color:var(--sand-dim);margin:0 6px 6px}
.bd-add{
  background:none;border:1px solid var(--flare);color:var(--flare);
  padding:5px 14px;border-radius:var(--r-pill);font:inherit;font-size:13px;cursor:pointer;
}
.bd-add:hover{background:rgba(var(--flare-rgb),.12)}
.bd-add[disabled]{border-color:var(--line);color:var(--sand-dim);cursor:default;background:none}

/* ---- message requests ---- */
.req-h{
  font:600 13px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;
  color:var(--sand-dim);margin:0 0 8px;display:flex;align-items:center;gap:8px;
}
.req-n{
  background:var(--flare);color:#fff;border-radius:var(--r-pill);
  padding:1px 7px;font-size:12px;letter-spacing:0;
}
.req-list{margin-bottom:6px}
.req-note{font-size:13px;color:var(--sand-dim);margin:0 0 24px 12px}
.th-note{
  font-size:14px;color:var(--sand-dim);line-height:1.5;
  padding:12px 14px;background:var(--ink-2);border-radius:var(--r);margin-bottom:12px;
}

/* The mark sits with the name rather than replacing it: at 22px the
   letterform reads, but only next to the word it comes from. */

/* "zone" in the site's own face rather than the display one. */

/* ============ admin ============ */
.adm{background:var(--ink);color:var(--cream);font:15px/1.5 var(--font);min-height:100vh}
.adm a{color:var(--flare)}

.adm-top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 20px;border-bottom:1px solid var(--line);
}
.adm-brand{font-weight:700;color:var(--cream);text-decoration:none}
.adm-brand span{color:var(--sand-dim);font-weight:400}
.adm-out{background:none;border:0;color:var(--sand-dim);font:inherit;cursor:pointer}
.adm-out:hover{color:var(--cream)}

.adm-frame{display:grid;grid-template-columns:190px minmax(0,1fr);gap:28px;
  width:min(1240px,100% - 40px);margin-inline:auto;padding-block:24px 64px;align-items:start}
.adm-nav{display:grid;gap:1px;position:sticky;top:24px}
.adm-nav a{
  padding:9px 12px;border-radius:var(--r);color:var(--cream);
  text-decoration:none;font-size:15px;
}
.adm-nav a:hover{background:var(--ink-2)}
.adm-nav a.on{background:rgba(var(--flare-rgb),.12);color:var(--flare)}

.adm-main{min-width:0}
.adm-h{font:700 24px/1.2 var(--font);margin-bottom:20px}
.adm-h2{font:700 17px/1.2 var(--font);margin:32px 0 12px}
.adm-none{color:var(--sand-dim)}
.adm-note{color:var(--sand-dim);font-size:13px;margin-top:10px}
.adm-dim{color:var(--sand-dim)}
.adm-flash{background:rgba(var(--flare-rgb),.12);color:var(--flare);
  padding:10px 14px;border-radius:var(--r);margin-bottom:16px}
.adm-err{background:rgba(var(--flare-rgb),.14);color:var(--flare);
  padding:10px 14px;border-radius:var(--r);margin-bottom:16px}

/* Cards are links where there is somewhere to go, so a number on the
   dashboard is a way into the screen that explains it. */
.adm-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.adm-card-n{
  display:grid;gap:4px;padding:16px 18px;background:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r);
  text-decoration:none;color:var(--cream);
}
a.adm-card-n:hover{border-color:var(--flare)}
.adm-n{font:700 28px/1 var(--font)}
.adm-l{font-size:13px;color:var(--sand-dim)}

.adm-table{width:100%;border-collapse:collapse;font-size:14px}
.adm-table th{
  text-align:left;font-weight:600;color:var(--sand-dim);font-size:12px;
  text-transform:uppercase;letter-spacing:.05em;padding:0 10px 8px;
}
.adm-table td{padding:10px;border-top:1px solid var(--line);vertical-align:middle}
.adm-table a{text-decoration:none}
.adm-acts form{display:flex;gap:6px;justify-content:flex-end}

.adm-status{font-size:12px;padding:2px 8px;border-radius:var(--r-pill);background:var(--ink-2)}
.adm-active{color:#3FD07A}
.adm-suspended{color:var(--flare)}
.adm-pending{color:var(--sand-dim)}
.adm-tag{font-size:11px;padding:1px 6px;border-radius:var(--r-pill);
  background:rgba(var(--flare-rgb),.14);color:var(--flare);margin-left:4px}

.adm-btn{
  background:var(--ink-2);border:1px solid var(--line);color:var(--cream);
  padding:7px 14px;border-radius:var(--r);font:inherit;font-size:14px;cursor:pointer;
}
.adm-btn:hover{border-color:var(--flare)}
.adm-btn-sm{padding:4px 10px;font-size:13px}
.adm-btn-go{background:var(--flare);border-color:var(--flare);color:#fff}
.adm-btn-warn:hover{color:var(--flare)}

.adm-bar{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.adm-bar input,.adm-bar select{
  background:var(--ink-2);border:1px solid var(--line);color:var(--cream);
  padding:7px 12px;border-radius:var(--r);font:inherit;font-size:14px;
}
.adm-bar input{flex:1;min-width:180px}

.adm-form{display:grid;gap:12px;max-width:340px}
.adm-form label{display:grid;gap:5px;font-size:13px;color:var(--sand-dim)}
.adm-form input{
  background:var(--ink-2);border:1px solid var(--line);color:var(--cream);
  padding:9px 12px;border-radius:var(--r);font:inherit;font-size:15px;
}
.adm-form input:focus{outline:2px solid var(--flare);outline-offset:-1px}
.adm-form-row{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  align-items:end;max-width:none}

.adm-bare{display:grid;place-items:center;min-height:100vh}
.adm-card{width:min(340px,100% - 40px);padding:28px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r)}

@media (max-width:760px){
  .adm-frame{grid-template-columns:1fr;gap:18px}
  .adm-nav{position:static;grid-auto-flow:column;overflow-x:auto}
}

/* An AI account says so wherever its name appears. Small, but never
   hidden: the point is that nobody has to wonder. */
.ai-badge{
  display:inline-block;vertical-align:middle;margin-left:6px;
  font:600 10px/1 var(--font);letter-spacing:.08em;
  padding:3px 6px;border-radius:var(--r-pill);
  background:rgba(var(--sand-rgb),.16);color:var(--sand);
}
.ai-note{
  font-size:13px;color:var(--sand-dim);line-height:1.5;
  padding:10px 14px;background:var(--ink-2);border-radius:var(--r);margin-bottom:12px;
}

/* ---- video call ---- */
.call-sheet{z-index:80;background:#000;display:grid}

#call-remote{width:100%;height:100%;object-fit:cover}
#call-local{
  position:absolute;right:14px;top:14px;width:110px;
  border-radius:10px;object-fit:cover;box-shadow:0 4px 16px rgba(0,0,0,.5);
}
.call-bar{
  position:absolute;left:0;right:0;bottom:calc(24px + env(safe-area-inset-bottom));
  display:grid;justify-items:center;gap:14px;
}
.call-who{color:#fff;font-size:17px;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.call-acts{display:flex;gap:14px}
.call-hang{background:var(--flare);color:var(--ink)}
.call-accept{background:#3FD07A;color:var(--ink)}

/* ---- going live ---- */
.live-sheet{z-index:80;background:#000;display:grid}

#live-preview{width:100%;height:100%;object-fit:cover}
.live-bar{
  position:absolute;left:0;right:0;bottom:calc(24px + env(safe-area-inset-bottom));
  display:grid;justify-items:center;gap:12px;padding-inline:20px;
}
.live-status{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.live-title{
  width:min(420px,100%);padding:11px 14px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.4);color:#fff;font:inherit;
}
.live-acts{display:flex;gap:12px;align-items:center}

/* ---- live on a profile ---- */
.live-card{position:relative;margin-bottom:22px;border-radius:var(--r);overflow:hidden;background:#000}
.live-card video,.live-card iframe{display:block;width:100%;aspect-ratio:16/9;border:0;object-fit:cover}
.live-pill{
  position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:var(--r-pill);background:var(--flare);color:var(--ink);
  font:700 12px/1 var(--font);letter-spacing:.04em;
}
.live-cap{position:absolute;left:14px;bottom:12px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.live-cap strong{display:block;font-size:19px}
.live-cap em{font-style:normal;font-size:14px;opacity:.85}

/* The iframe swallows clicks, so an overlay carries the link. */
.live-open{position:relative;display:block}
.live-open-hit{position:absolute;inset:0}
.live-open video{aspect-ratio:auto}
.live-mute{position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.5);color:#fff}
.live-mute.on{background:var(--flare);color:var(--ink)}
.rail-live{width:100%;margin-top:8px;justify-content:center;border-color:var(--flare);color:var(--flare)}

/* ---- live in the hint row ---- */
.tray-card.on-air{outline:2px solid var(--flare);outline-offset:-2px}
.tray-card.on-air .tray-av{box-shadow:0 0 0 2px var(--flare)}
.tray-live{
  position:absolute;left:8px;top:8px;z-index:2;
  padding:3px 7px;border-radius:var(--r-pill);background:var(--flare);color:var(--ink);
  font:700 10px/1 var(--font);letter-spacing:.05em;
}

/* ---- live card in the row ---- */
.tray-eyes{
  position:absolute;right:8px;top:8px;z-index:2;
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border-radius:var(--r-pill);
  background:rgba(0,0,0,.55);color:#fff;font:600 11px/1 var(--font);
}
.tray-who{
  position:absolute;left:10px;right:10px;bottom:10px;z-index:2;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.8);
}
.tray-who strong{display:block;font-size:15px}
.tray-who em{font-style:normal;font-size:12px;opacity:.8;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tray-card.on-air .tray-name{display:none}

/* ---- live room ----
   A feed card opened up (views/pages/live.php). The card's styles do the
   layout; only what a room adds lives here. */
.card.post.live-room .live-chat{
  grid-row:4;grid-column:1 / -1;
  display:flex;flex-direction:column;gap:12px;min-height:0;
  margin:0 var(--post-panel-edge) var(--post-panel-edge);
}
.card.post.live-room .live-messages{flex:1 1 auto;min-height:0;max-height:30svh;overflow-y:auto;align-content:start}

/* Public chat: everyone on the left with their own avatar, as in the
   feed's bubbles. Your own lines keep their tint but do not move. */
.card.post.live-room .post-quick-msg.mine{justify-self:start;flex-direction:row}
.card.post.live-room .post-quick-msg.mine .post-quick-bubble{border-radius:18px 18px 18px 6px}
.live-room .post-quick-name{display:block;font-size:13px;font-weight:600;color:var(--flare)}
.live-room .lc-time{display:block;margin-top:4px;text-align:right;font-size:12px;color:var(--sand-dim)}
.lc-mute{background:none;border:0;color:var(--sand-dim);font-size:12px;cursor:pointer}
.lc-mute:hover{color:var(--flare)}

/* Wide screens: the chat is a column beside the stream, input at its foot. */
@media (min-width:901px){
  .card.post.live-room{
    --live-chat-w:360px;
    --post-col:min(
      480px,
      var(--post-frame) - var(--post-control-gap) * 2 - var(--post-control-w) - var(--live-chat-w)
    );
    grid-template-columns:
      1fr
      var(--post-col)
      var(--post-control-gap)
      var(--post-control-w)
      var(--post-control-gap)
      var(--live-chat-w)
      1fr;
  }
  .card.post.live-room .live-chat{grid-row:2 / 4;grid-column:6;margin:0 0 18px}
  .card.post.live-room .live-messages{max-height:none}
}

/* ---- chat over the broadcaster's preview ---- */
.live-overlay{
  position:absolute;left:16px;right:16px;bottom:170px;z-index:3;
  list-style:none;margin:0;padding:0;display:grid;gap:6px;align-content:end;
  pointer-events:none;
}
.live-overlay li{
  font-size:14px;line-height:1.4;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.9);
}
.live-overlay b{color:var(--flare);margin-right:6px}
/* Older lines recede so the broadcaster can still see themselves. */
.live-overlay li:nth-last-child(4){opacity:.6}
.live-overlay li:nth-last-child(5){opacity:.35}

/* ---- broadcaster's screen ---- */
.lv-top{
  position:absolute;left:14px;right:14px;top:calc(14px + env(safe-area-inset-top));
  z-index:3;display:flex;justify-content:space-between;align-items:center;
}
.lv-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 11px;border-radius:var(--r-pill);background:var(--flare);color:var(--ink);
  font:700 12px/1 var(--font);letter-spacing:.04em;
}
.lv-badge em{font-style:normal;font-weight:600}
.lv-eyes{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px;border-radius:var(--r-pill);
  background:rgba(0,0,0,.5);color:#fff;font:600 13px/1 var(--font);
}
.lv-eyes em{font-style:normal}

.lv-setup,.lv-on{
  position:absolute;left:16px;right:16px;z-index:3;
  bottom:calc(24px + env(safe-area-inset-bottom));
  display:grid;gap:12px;justify-items:center;
}

.lv-reply{display:flex;gap:8px;width:min(460px,100%)}
.lv-reply input{
  flex:1;min-width:0;padding:12px 16px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.45);
  color:#fff;font:inherit;
}
.lv-reply input::placeholder{color:rgba(255,255,255,.6)}
.lv-end{background:var(--flare);color:var(--ink);min-width:120px}

/* ---- composer: pick a line ---- */
.cs-line{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-bottom:8px;padding:14px 16px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);color:var(--cream);font:inherit;text-align:left;cursor:pointer}
.cs-line:hover{border-color:var(--flare)}
.cs-line svg{color:var(--flare);flex:0 0 auto}
.cs-lines{max-height:min(46vh,340px);overflow-y:auto;margin-bottom:8px}
.cs-own{display:block;margin-bottom:16px;font-size:14px}
.chip input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.chip:focus-within{border-color:var(--flare);color:var(--flare)}
.cs-cats,.cs-cat ul{list-style:none;display:grid;gap:6px}
.cs-cat .linkish{display:block;margin-bottom:10px;font-size:14px}

/* ---- admin modal ---- */
.adm-modal{border:1px solid var(--line);background:var(--ink-2);color:var(--cream);padding:0;max-width:460px;width:calc(100% - 32px)}
.adm-modal::backdrop{background:rgba(var(--ink-rgb),.72)}
.adm-modal .adm-form{max-width:none;padding:20px;gap:14px}
.adm-modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.adm-modal-head h2{font:700 17px/1.2 var(--font)}
.adm-modal-foot{display:flex;justify-content:flex-end}
.adm-form select,.adm-form textarea{
  padding:8px 10px;background:var(--ink);border:1px solid var(--line);
  border-radius:var(--r);color:var(--cream);font:inherit;width:100%;
}
.adm-form select:focus,.adm-form textarea:focus{outline:2px solid var(--flare);outline-offset:-1px}
.adm-head-row{display:flex;align-items:center;justify-content:flex-end;margin-bottom:16px}
.adm-check{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--cream)}
.adm-check input{width:auto}
.adm-modal{margin:auto}
.adm-modal input[type=number]{width:100%}
.adm-form select,.adm-bar select{appearance:none;background-image:none;padding-right:12px}
.adm-form input[type=number]{appearance:textfield}
.picks:empty{margin:0}
.line-cat-head{color:var(--sand-dim);margin-bottom:18px;font-size:15px}
.line-h{font:600 21px/1.3 var(--font);letter-spacing:-.01em;margin-bottom:4px}
.cs-head{justify-content:flex-end;border-bottom:0}
.thumb-clip{aspect-ratio:9/16}
.thumb-clip video{width:100%;height:100%;object-fit:cover}
.chip.on{border-color:var(--flare);color:var(--flare)}
.chip[disabled]{opacity:.4;pointer-events:none}
.cs-live{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:20px;padding:12px;background:none;border:1px solid var(--line);border-radius:var(--r-pill);color:var(--sand);font:inherit;cursor:pointer}
.cs-live:hover{border-color:var(--flare);color:var(--flare)}
.cs-post{width:100%;margin-top:16px}
.post-media:empty{display:none}
.post-name .js-follow{margin-left:4px}

/* ---- live now ---- */
.live-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.live-tile{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;background:var(--ink-2);text-decoration:none}
.live-tile img{width:100%;height:100%;object-fit:cover}
.live-tile-blank{display:grid;place-items:center;width:100%;height:100%;color:var(--sand-dim)}
.live-tile .live-pill{position:absolute;top:10px;left:10px}
.live-tile-who{position:absolute;left:0;right:0;bottom:0;padding:32px 12px 12px;color:#fff;background:linear-gradient(rgba(var(--ink-rgb),0),rgba(var(--ink-rgb),.9))}
.live-tile-who strong{display:block;font-size:15px}
.live-tile-who em{display:block;font-style:normal;font-size:13px;color:rgba(255,255,255,.75);margin-top:2px}

.feed-cats{display:flex;gap:8px;margin-bottom:18px;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.feed-cats::-webkit-scrollbar{display:none}
.feed-cats .chip{flex:0 0 auto;text-decoration:none}

.cat-drop{margin-top:10px;padding:12px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r)}
.cat-drop ul{list-style:none;display:grid;gap:4px}
.cat-drop .starter{width:100%;text-align:left;text-decoration:none;padding:9px 12px}
.cat-all{display:block;margin-bottom:8px;color:var(--flare);font-size:14px;text-decoration:none}
.chip.now{border-color:var(--flare);color:var(--flare)}
.cats{position:sticky;top:71px;z-index:20;padding-block:30px 14px;background:var(--ink)}
.head-in{height:100%}

/* A column with no chip row above it provides its own top space: the
   chips carry theirs, so only the pages without them need this. */
.col:not(:has(.cats)){padding-top:24px}
.feed-cats{cursor:grab}
.feed-cats:active{cursor:grabbing}
.stream .card:first-child{padding-top:0}

@media (max-width:900px){
  /* The list takes what is left of the screen rather than pushing the
     feed down: ten lines is more than a phone shows at once. */
  .cat-drop{
    position:fixed;left:0;right:0;bottom:0;top:var(--drop-top,139px);
    margin:0;border-radius:0;border-left:0;border-right:0;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;z-index:60;
    padding:16px var(--pad) calc(16px + env(safe-area-inset-bottom));
  }
}
.cat-drop-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
.cat-drop-head .cat-all{margin-bottom:0}
@media (min-width:901px){
  .cat-drop-head .js-drop-close{display:none}
}
/* The lines start where the tag does, so the column reads as one. */
.cat-drop .starter{padding-inline:0}
.live-join{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;padding:12px;background:rgba(var(--flare-rgb),.12);border:1px solid var(--flare);border-radius:var(--r);color:var(--flare);text-decoration:none;font-weight:600}
.live-join:hover{background:rgba(var(--flare-rgb),.2)}
.card-live .live-pill{position:static}
/* Nothing at all until the first frame: an empty black box for a
   second reads as something failing. */
/* In the layout so the observer can see it, but taking no space and
   showing nothing until the first frame arrives. */
.feed-live{position:absolute;inset:0;background:#000 50% 30%/cover}
.feed-live .live-pill{position:absolute;top:12px;left:12px}
/* Their face while the stream connects: a second of black reads as
   broken, a second of them reads as waiting. */
@media (max-width:1100px){.frame>main~*{display:none}}
.composer:not(.has-line) :is(.composer-foot,.cs-post){display:none}
.mark span em{font-style:normal;color:var(--flare)}
/* A hidden sheet stays hidden: position:fixed can otherwise beat the
   attribute's own display:none for a frame on load. */

/* ---- landing ---- */
.lp{display:grid;justify-items:center;gap:18px;max-width:340px;margin:0 auto;padding:8vh 0 40px;text-align:center}
.lp .mark{pointer-events:none}
.lp-line{color:var(--sand);font-size:16px;margin-bottom:6px}
.lp-form{display:grid;gap:10px;width:100%}
.lp-form input{padding:13px 15px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);color:var(--cream);font:inherit;font-size:15px}
.lp-form input:focus{outline:2px solid var(--flare);outline-offset:-1px}
.lp-form .btn{width:100%;margin-top:4px}
.lp-alt{color:var(--sand-dim);font-size:14px}
.lp-acts{display:grid;gap:10px;width:100%}
.lp-acts .btn{width:100%}
.lp-wide{max-width:380px}
.lp-wide .form{width:100%;text-align:left}
.bare-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;padding:32px var(--pad) 40px;font-size:13px;color:var(--sand-dim)}
.bare-foot a{color:inherit;text-decoration:none}
.bare-foot a:hover{color:var(--flare)}
/* The rail's rows carry padding for their active background; the
   block shifts left by the same amount so the text starts where the
   logo does. */
.rail{margin-left:-14px}

/* ---- rail foot: the once-a-month links ---- */
.rail-foot{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:22px;padding:0 14px;font-size:12px;line-height:1.7}
.rail-foot a{color:var(--sand-dim);text-decoration:none}
.rail-foot a:hover{color:var(--cream)}
.rail-foot span{color:var(--sand-dim);opacity:.7;width:100%}

/* A liked heart is the same shape filled in. */
.post-acts .act.on{color:var(--flare)}
.post-acts .act.on svg path{fill:currentColor;stroke:currentColor}

/* ---- the deck ---- */
/* Cards sit on top of one another, last in the DOM on top, so the
   stack is source order rather than a z-index per card. */
.deck{position:relative;height:min(70vh,560px);margin-bottom:18px}

/* The card is the page: nothing above it, nothing to scroll past. */
@media (max-width:900px){
  body:has(.deck){overflow:hidden}
  .deck{
    position:fixed;inset:0;height:auto;margin:0;z-index:5;
  }
  .deck-card{border-radius:0}
}
.deck-card{
  position:absolute;inset:0;overflow:hidden;border-radius:var(--r);
  background:var(--ink-2);cursor:grab;touch-action:pan-y;
  transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .3s ease .15s;
}
.deck-card.gone{opacity:0;pointer-events:none}
.deck-card img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;user-select:none}
.deck-noav{display:grid;place-items:center;height:100%;color:var(--sand-dim)}

.deck-who{
  position:absolute;left:0;right:0;bottom:0;padding:44px 18px 18px;
  background:linear-gradient(transparent,rgba(var(--ink-rgb),.9));
}
.deck-who a{display:block;font-size:22px;font-weight:600;color:var(--cream);text-decoration:none}
.deck-who em{font-style:normal;font-size:14px;color:var(--sand-dim)}

/* The verdict stamps. Hidden until a drag is under way, then faded in
   proportionally, so the card says what letting go will do. */
.deck-verdict{
  position:absolute;top:22px;opacity:0;padding:6px 14px;border-radius:var(--r);
  font:600 15px/1 var(--font);text-transform:uppercase;letter-spacing:.08em;
  border:2px solid currentColor;pointer-events:none;
}
.deck-yes{left:20px;color:var(--flare);transform:rotate(-12deg)}
.deck-no{right:20px;color:var(--sand);transform:rotate(12deg)}

.deck-acts{display:flex;justify-content:center;gap:26px}
/* On a phone these live in the bottom bar instead. */
@media (max-width:860px){.deck-acts{display:none}}
.mnav-deck-like{color:var(--flare)}
.deck-acts .btn-round{width:60px;height:60px;border:1px solid var(--line);background:var(--ink-2)}
.deck-pass{color:var(--sand)}
.deck-like{color:var(--flare);border-color:var(--flare)}

.deck-done{text-align:center;color:var(--sand-dim);padding:40px 0}

/* ---- full-screen feed (phones) ---- */
/* Same shell as a deck card: the picture is the card, and everything
   else sits on top of it at the bottom. One shape to learn, whether
   you are looking at a person or a post. */
@media (max-width:900px){
  /* The feed is the mobile viewport. Header and navigation overlay it,
     so the document itself must not become a second vertical scroller. */
  body:has(#stream){
    height:100svh;
    overflow:hidden;
  }

  body:has(#stream) .site-head{
    position:fixed;
    top:0;
    left:0;
    right:0;
  }

  body:has(#stream) .frame{
    height:100svh;
  }

  body:has(#stream) .col{
    height:100svh;
    padding-block:0;
  }

  .stream{
    height:100svh;margin-inline:calc(var(--pad,16px) * -1);
    overflow-y:auto;scroll-snap-type:y mandatory;
    scrollbar-width:none;overscroll-behavior-y:contain;
  }
  .stream::-webkit-scrollbar{display:none}
}

@media (min-width:1px){

  /* svh, not dvh: dvh grows when the URL bar retracts, so a card sized
     in it runs past the bottom of the screen and takes the caption with
     it — under the bar, which is measured against the real viewport. */
  .card.post{
    position:relative;height:100svh;scroll-snap-align:start;
    padding:0;overflow:hidden;background:var(--ink-2);

    /* Rows, not arithmetic. The panel is as tall as whatever is in it
       and the picture takes what is left, so nothing has to predict
       how long a caption runs or how many messages are showing. */
    display:grid;

    /* Clearance, identity, picture, panel, clearance. The identity has
       a band of its own, so it never sits on an attachment. */
    grid-template-rows:
      var(--post-media-top)
      var(--post-band-h)
      1fr
      auto
      var(--post-bottom-clear);

    /* The middle two tracks are the picture and the rail; the 1fr on
       either side centres that pair whatever the picture's shape. */
    grid-template-columns:
      1fr
      var(--post-col)
      var(--post-control-gap)
      var(--post-control-w)
      1fr;
  }

  .card.post .post-media{
    grid-row:3;
    grid-column:2;
    position:relative;border-radius:0;aspect-ratio:auto;min-height:0;
  }
  .card.post .post-media .gal{border-radius:0}

  .card.post .starter-tag,
  .card.post .post-counts{
    position:relative;z-index:1;margin:0;padding:0 18px;
  }

  .card.post .post-foot-stack{
    grid-row:4;
    grid-column:1 / -1;
    position:relative;
    z-index:2;
  }

  /* What is left is the picture, the line and who posted it. The rest
     is a tap away on their profile. */
  .card.post .post-meta,
  .card.post .post-counts,
  .card.post .js-follow{display:none}
  .card.post .menu summary{color:var(--cream);filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}

  .card.post .feed-sound{
    z-index:3;
  }
  .card.post::before{
    content:'';position:absolute;left:0;right:0;top:0;height:34%;
    background:linear-gradient(rgba(var(--ink-rgb),.75),transparent);
    pointer-events:none;z-index:1;
  }
  .card.post .post-name{font-size:16px}

  /* The line is the post. It should read from across the room, and
     everything else on the card should defer to it. */
  .card.post .post-body{
    font-size:27px;font-weight:600;line-height:1.2;letter-spacing:-.015em;
    text-wrap:balance;text-shadow:0 2px 12px rgba(0,0,0,.5);
  }
  .card.post .starter-tag{font-size:14px;opacity:.85}

  /* The old row goes: these are the rail now. */
  .card.post .post-acts{display:none}

  /* Actions stay on the visual stage. */
  /* Placement lives with the card grid now; only the look is here. */
  .post-rail{
    z-index:3;
    display:grid;gap:20px;justify-items:center;
  }
  .rail-act{
    display:grid;justify-items:center;gap:4px;
    background:none;border:0;padding:0;cursor:pointer;
    color:var(--cream);filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));
  }
  .rail-act em{font-style:normal;font-size:12px;font-weight:600}
  .rail-act.on{color:var(--flare)}
  .rail-act.on svg path{fill:currentColor}
}

.lines-sheet{z-index:60;background:var(--ink);overflow-y:auto;padding-bottom:120px}

/* The row is the link; the accept and decline buttons stay outside it
   so a tap on them is not a navigation. */
.notif-go{display:flex;align-items:center;gap:12px;flex:1;min-width:0;color:inherit;text-decoration:none}


/* [hidden] is the app state, so it wins over any component display rule. */
[hidden]{display:none}

.rail-act.js-save.on{color:var(--flare)}
.rail-act.js-save.on svg path{fill:currentColor}

/* Same card, loose on a wide screen: it sits in the column with its
   own edges rather than filling the window like a page. */
@media (min-width:901px){
  .card.post{
    height:auto;aspect-ratio:4/5;
    border-radius:var(--r);margin-bottom:18px;
  }

  .post-rail{gap:14px}
}

/* No double-tap zoom anywhere: a second tap is always a second tap,
   never a magnifier. Pinch still works where it is allowed. */
html{touch-action:manipulation}

/* The panel is wider than the button it hangs off, so on a phone it
   answers to the screen: full width, directly under the header. */
@media (max-width:900px){
  .bell-pop{
    position:fixed;left:8px;right:8px;width:auto;max-width:none;
    top:calc(var(--head-h,64px) + 8px);
  }
  .bell-pop{bottom:calc(var(--bar-h,96px) + 8px);display:flex;flex-direction:column}
  .bell-list{max-height:none;flex:1;min-height:0}
}

/* iOS zooms a field it thinks is too small to read, so nothing that
   takes typing goes under 16px. */
input,textarea,select{font-size:max(16px,1em)}



/* === DESKTOP FEED SNAP START === */
@media (min-width:901px){

  /*
   * Desktop scrolls the document, not .stream.
   * Snap the viewport itself to each feed post.
   */
  html:has(#stream){
    scroll-snap-type:y mandatory;
    scroll-padding-top:var(--head-h,64px);
  }

  #stream .card.post{
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
}
/* === DESKTOP FEED SNAP END === */

/* === CONTEXTUAL HEADER START ===
   Focused pages can replace the normal site header with page context.
   Same 71px chrome on desktop and mobile; content adapts inside it.
*/
.ctx-head{
  position:sticky;
  top:0;
  height:71px;
  z-index:30;
  background:var(--ink);
  border-bottom:1px solid var(--line);
}

.ctx-inner{
  width:min(1180px,100% - var(--pad)*2);
  height:71px;
  margin-inline:auto;
  display:flex;
  align-items:center;
  gap:10px;
}

.ctx-back{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--cream);
  text-decoration:none;
}

.ctx-back:hover{
  background:rgba(var(--cream-rgb),.06);
}

.ctx-title{
  min-width:0;
  color:var(--cream);
  font:600 19px/1.2 var(--font);
  letter-spacing:-.01em;
}

.ctx-person{
  min-width:0;
  flex:1;
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--cream);
  text-decoration:none;
  font-weight:600;
}

.ctx-av{
  width:32px;
  height:32px;
  flex:0 0 32px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
  background:var(--ink-2);
  color:var(--sand-dim);
}

.ctx-av img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.ctx-name{
  min-width:0;
  display:flex;
  align-items:center;
  gap:6px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.ctx-action{
  margin-left:auto;
}

@media (max-width:900px){
  .ctx-head{
    height:64px;
  }

  .ctx-inner{
    width:calc(100% - var(--pad)*2);
    height:64px;
  }

  .ctx-title{
    font-size:18px;
  }

  .ctx-av{
    width:34px;
    height:34px;
    flex-basis:34px;
  }
}
/* === CONTEXTUAL HEADER END === */

/* === THREAD INTERNAL SCROLL START === */
.th-log{
  overflow-y:auto;
  overscroll-behavior-y:contain;
  scrollbar-gutter:stable;
  min-height:0;
}
/* === THREAD INTERNAL SCROLL END === */

/* === MESSAGE WORKSPACE START === */

.msg-workspace{
  width:min(1180px,100%);
  height:100dvh;
  margin-inline:auto;
  display:grid;
  grid-template-columns:340px minmax(0,1fr);
  overflow:hidden;
}

.msg-workspace-list{
  min-width:0;
  height:100dvh;
  display:flex;
  flex-direction:column;
  border-right:1px solid var(--line);
  background:var(--ink);
}

.msg-list-head{
  height:71px;
  flex:0 0 71px;
  padding:0 16px;
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid var(--line);
}

.msg-list-head strong{
  color:var(--cream);
  font:600 19px/1.2 var(--font);
}

.msg-list-back,
.msg-thread-back{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--cream);
  text-decoration:none;
}

.msg-list-back:hover,
.msg-thread-back:hover{
  background:rgba(var(--cream-rgb),.06);
}

.msg-list-scroll{
  min-height:0;
  flex:1;
  overflow-y:auto;
  padding:10px 8px 24px;
  overscroll-behavior-y:contain;
}

.msg-workspace-list .thread.active{
  background:var(--ink-2);
}

.msg-workspace-chat{
  min-width:0;
  height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--ink);
}

.msg-thread-head{
  height:71px;
  flex:0 0 71px;
  padding:0 24px;
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid var(--line);
}

.msg-thread-person{
  min-width:0;
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--cream);
  text-decoration:none;
  font-weight:600;
}

.msg-thread-av{
  width:36px;
  height:36px;
  flex:0 0 36px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
  background:var(--ink-2);
  color:var(--sand-dim);
}

.msg-thread-av img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.msg-thread-name{
  min-width:0;
  display:flex;
  align-items:center;
  gap:6px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.msg-thread-call{
  margin-left:auto;
}

.msg-workspace-chat .th-log{
  flex:1;
  min-height:0;
  height:auto !important;
  margin:0;
  padding:18px 24px;
  overflow-y:auto;
}

.msg-workspace-chat .th-note{
  flex:0 0 auto;
  margin:0;
  padding:10px 24px;
}

.msg-workspace-chat .th-send{
  position:static;
  flex:0 0 auto;
  width:auto;
  padding:10px 24px 16px;
  background:var(--ink);
}

.msg-workspace-empty{
  height:100%;
  display:grid;
  place-items:center;
  color:var(--sand-dim);
  text-align:center;
  padding:24px;
}

/* Mobile remains list -> conversation -> back. */
@media (max-width:900px){
  .msg-workspace{
    width:100%;
    height:100dvh;
    display:block;
  }

  .msg-workspace.inbox-only .msg-workspace-chat{
    display:none;
  }

  .msg-workspace.has-thread .msg-workspace-list{
    display:none;
  }

  .msg-workspace-list,
  .msg-workspace-chat{
    width:100%;
    height:100dvh;
  }

  .msg-list-head,
  .msg-thread-head{
    height:64px;
    flex-basis:64px;
  }

  .msg-thread-head{
    padding-inline:var(--pad);
  }

  .msg-workspace-chat .th-log{
    padding:14px var(--pad);
  }

  .msg-workspace-chat .th-send{
    position:fixed;
    left:var(--pad);
    right:var(--pad);
    bottom:0;
    width:auto;
    padding:10px 0;
  }
}

/* === MESSAGE WORKSPACE END === */

/* === MESSAGE WORKSPACE DESKTOP POLISH START === */
@media (min-width:901px){

  /* Messaging is its own desktop workspace, so use more of the screen. */
  .msg-workspace{
    width:min(1480px,calc(100% - 48px));
    grid-template-columns:300px minmax(0,1fr);
  }

  /* The thread is already visible beside the list on desktop. */
  .msg-thread-back{
    display:none;
  }

  .msg-thread-head{
    padding-inline:28px;
  }

  /*
   * Keep messages visually connected even on a very wide monitor.
   * The pane stays wide; the actual conversation gets a readable width.
   */
  .msg-workspace-chat .th-log{
    width:min(900px,100%);
    margin-inline:auto;
    box-sizing:border-box;
    padding-inline:20px;
  }

  .msg-workspace-chat .th-note{
    width:min(900px,100%);
    margin-inline:auto;
    box-sizing:border-box;
  }

  .msg-workspace-chat .th-send{
    width:min(900px,calc(100% - 40px));
    margin-inline:auto;
    padding:10px 0 16px;
    box-sizing:border-box;
  }
}
/* === MESSAGE WORKSPACE DESKTOP POLISH END === */

/* === MESSAGE WORKSPACE FINAL PROPORTIONS START === */
@media (min-width:901px){

  .msg-workspace-chat .th-log{
    width:min(760px,100%);
  }

  .msg-workspace-chat .th-note{
    width:min(760px,100%);
  }

  .msg-workspace-chat .th-send{
    width:min(760px,calc(100% - 40px));
  }

  .msg-workspace-list .thread{
    border-radius:10px;
  }

  .msg-workspace-list .thread.active{
    background:rgba(var(--cream-rgb),.07);
  }
}
/* === MESSAGE WORKSPACE FINAL PROPORTIONS END === */

/* === MESSAGE WORKSPACE BOTTOM SPACING START === */
@media (min-width:901px){
  .msg-workspace-chat .th-log{
    padding-bottom:32px;
    scroll-padding-bottom:32px;
  }
}
/* === MESSAGE WORKSPACE BOTTOM SPACING END === */

/* === MOBILE THREAD COMPOSER CLEARANCE START === */
@media (max-width:900px){
  .msg-workspace-chat .th-log{
    box-sizing:border-box;
    padding-bottom:calc(var(--th-send-h,72px) + 16px);
    scroll-padding-bottom:calc(var(--th-send-h,72px) + 16px);
  }
}
/* === MOBILE THREAD COMPOSER CLEARANCE END === */

/* ---- discover filters ---- */
.discover-sheet{
  z-index:70;
  background:rgba(var(--ink-rgb),.82);
  backdrop-filter:blur(8px);
  display:grid;
  place-items:center;
  padding:20px;
}
.discover-sheet[hidden]{display:none}
.discover-panel{
  width:min(620px,100%);
  max-height:min(760px,calc(100dvh - 40px));
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--r);
}
.discover-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:20px;
  border-bottom:1px solid var(--line);
}
.discover-head strong{
  display:block;
  font:600 22px/1.1 var(--font);
  color:var(--cream);
}
.discover-head span{
  display:block;
  margin-top:5px;
  color:var(--sand-dim);
  font-size:14px;
}
.discover-body{
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:22px 20px;
}
.discover-group{
  border:0;
  padding:0;
  margin:0 0 28px;
}
.discover-group:last-child{margin-bottom:0}
.discover-group legend{
  margin-bottom:12px;
  color:var(--sand-dim);
  font:600 12px/1 var(--font);
  text-transform:uppercase;
  letter-spacing:.09em;
}
.discover-options{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.discover-option{
  cursor:pointer;
}
.discover-option input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.discover-option span{
  display:block;
  padding:9px 13px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  color:var(--sand);
  font-size:14px;
}
.discover-option:hover span{
  border-color:var(--sand-dim);
  color:var(--cream);
}
.discover-option input:checked + span{
  border-color:var(--flare);
  background:rgba(var(--flare-rgb),.12);
  color:var(--flare);
}
.discover-line-list{
  display:grid;
  gap:4px;
}
.discover-line.is-hidden{
  display:none;
}
.discover-line{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px;
  border:1px solid transparent;
  border-radius:var(--r);
  cursor:pointer;
}
.discover-line:hover{
  background:rgba(var(--cream-rgb),.04);
}
.discover-line:has(input:checked){
  border-color:var(--flare);
  background:rgba(var(--flare-rgb),.08);
}
.discover-line input{
  margin-top:3px;
  accent-color:var(--flare);
}
.discover-line span{
  min-width:0;
}
.discover-line strong{
  display:block;
  color:var(--cream);
  font-size:15px;
}
.discover-line em{
  display:block;
  margin-top:3px;
  color:var(--sand-dim);
  font-size:13px;
  font-style:normal;
  line-height:1.35;
}
.discover-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 20px;
  border-top:1px solid var(--line);
}
.discover-clear{
  color:var(--sand);
  font-size:14px;
  text-decoration:none;
}
.discover-clear:hover{color:var(--cream)}

@media (max-width:700px){
  .discover-sheet{
    padding:0;
    place-items:stretch;
    background:var(--ink);
  }
  .discover-panel{
    width:100%;
    max-height:100dvh;
    height:100dvh;
    border:0;
    border-radius:0;
  }
  .discover-head{
    padding-top:calc(18px + env(safe-area-inset-top));
  }
  .discover-actions{
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
  }
}

/* ---- settings hub + shared sheet ---- */
.settings-hub{
  display:grid;
  margin-top:18px;
  border-top:1px solid var(--line);
}

.settings-row{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:17px 2px;
  background:none;
  border:0;
  border-bottom:1px solid var(--line);
  color:var(--cream);
  font:inherit;
  text-align:left;
  cursor:pointer;
}

.settings-row-copy{
  min-width:0;
}

.settings-row strong{
  display:block;
  font-size:16px;
  font-weight:600;
}

.settings-row em{
  display:block;
  margin-top:3px;
  overflow:hidden;
  color:var(--sand-dim);
  font-size:14px;
  font-style:normal;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.settings-row-arrow{
  flex:0 0 auto;
  color:var(--sand-dim);
  font-size:28px;
  line-height:1;
}

.settings-sheet{
  position:fixed;
  inset:0;
  z-index:80;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(0,0,0,.76);
}

.settings-sheet[hidden]{
  display:none;
}

.settings-panel{
  width:min(560px,100%);
  max-height:calc(100dvh - 40px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
}

.settings-sheet-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  border-bottom:1px solid var(--line);
}

.settings-sheet-head > strong{
  font-size:19px;
  font-weight:600;
}

.settings-sheet-body{
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:20px;
}

.settings-pane[hidden]{
  display:none;
}

.settings-pane .form{
  display:grid;
  gap:18px;
}

.settings-pane select{
  width:100%;
  min-height:46px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--ink);
  color:var(--cream);
  font:inherit;
}

@media (max-width:700px){
  .settings-sheet{
    padding:0;
    place-items:stretch;
  }

  .settings-panel{
    width:100%;
    height:100dvh;
    max-height:100dvh;
    border:0;
    border-radius:0;
  }

  .settings-sheet-head{
    padding-top:calc(
      16px + env(safe-area-inset-top)
    );
  }

  .settings-sheet-body{
    padding-bottom:calc(
      24px + env(safe-area-inset-bottom)
    );
  }
}

/* ---- discover compact drill navigation ---- */
.discover-head{
  position:relative;
}

.discover-head-copy{
  min-width:0;
  flex:1;
}

.discover-back{
  width:40px;
  height:40px;
  flex:0 0 40px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--cream);
  font:400 30px/1 var(--font);
  cursor:pointer;
}

.discover-back[hidden]{
  display:none;
}

.discover-back:hover{
  background:rgba(var(--cream-rgb),.06);
}

.discover-view[hidden]{
  display:none;
}

.discover-section-label{
  margin:4px 2px 10px;
  color:var(--sand-dim);
  font:600 12px/1 var(--font);
  text-transform:uppercase;
  letter-spacing:.09em;
}

.discover-section-label:not(:first-child){
  margin-top:28px;
}

.discover-filter-row{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:15px 4px;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}

.discover-filter-row:first-of-type{
  border-top:1px solid var(--line);
}

.discover-filter-row > span:first-child{
  min-width:0;
  display:block;
}

.discover-filter-row strong{
  display:block;
  color:var(--cream);
  font:600 15px/1.25 var(--font);
}

.discover-filter-row small{
  display:block;
  margin-top:4px;
  overflow:hidden;
  color:var(--sand-dim);
  font:400 14px/1.3 var(--font);
  text-overflow:ellipsis;
  white-space:nowrap;
}

.discover-chevron{
  flex:0 0 auto;
  color:var(--sand-dim);
  font-size:25px;
  line-height:1;
}

.discover-filter-row:hover strong,
.discover-filter-row:hover .discover-chevron{
  color:var(--flare);
}

.discover-choice-list{
  display:grid;
  gap:4px;
}

.discover-choice{
  position:relative;
  display:flex;
  align-items:center;
  min-height:48px;
  padding:0 14px;
  border:1px solid transparent;
  border-radius:var(--r);
  color:var(--sand);
  cursor:pointer;
}

.discover-choice:hover{
  background:rgba(var(--cream-rgb),.04);
  color:var(--cream);
}

.discover-choice:has(input:checked){
  border-color:var(--flare);
  background:rgba(var(--flare-rgb),.08);
  color:var(--flare);
}

.discover-choice input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.discover-choice span{
  font-size:15px;
}

@media (max-width:700px){
  .discover-filter-row{
    padding:17px 4px;
  }

  .discover-choice{
    min-height:52px;
  }
}

/* Inline flirt composer on fullscreen post cards */
@media (min-width:1px){
  .card.post .post-body,
  .card.post .post-quick-bubble p{
    font-size:clamp(22px,6vw,25px);
    font-weight:600;
    line-height:1.22;
    letter-spacing:-.012em;
  }

  .card.post .post-flirt-form{
    display:flex;
    align-items:center;
    gap:6px;
    width:min(100%,520px);
    padding:5px;
    border:1px solid rgba(255,255,255,.26);
    border-radius:999px;
    background:rgba(var(--ink-rgb),.48);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }

  .card.post .post-flirt-input{
    min-width:0;
    flex:1;
    border:0;
    outline:0;
    background:transparent;
    color:var(--cream);
    padding:9px 10px;
    font:500 15px/1.2 var(--font);
  }

  .card.post .post-flirt-input::placeholder{
    color:rgba(255,255,255,.62);
  }

  .card.post .post-flirt-send{
    border:0;
    border-radius:999px;
    background:var(--flare);
    color:var(--ink);
    padding:10px 15px;
    font:700 14px/1 var(--font);
    cursor:pointer;
  }

  .card.post .post-flirt-send:disabled{
    opacity:.55;
    cursor:default;
  }

}

/* === FEED CARD: MEDIA + CONVERSATION ===
   One card structure on every screen. Breakpoints only tune dimensions;
   media, speech and composer keep the same relationship everywhere. */
.card.post{
  /* A floor for the panel, not its height: it grows past this whenever
     the caption or the conversation needs the room. */
  --post-panel-h:180px;
  --post-panel-edge:14px;
  --post-bottom-clear:0px;
}


.card.post .post-media img,
.card.post .post-media video,
.card.post .post-media .gal,
.card.post .post-media .tile{
  width:100%;
  height:100%;
  object-fit:cover;
}

.card.post .post-foot-stack{
  margin:0 var(--post-panel-edge) var(--post-panel-edge);
  min-height:var(--post-panel-h);
  padding:18px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;

  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  background:rgba(var(--ink-rgb),.94);
  box-shadow:0 16px 40px rgba(0,0,0,.24);
}

.card.post .post-speech{
  display:flex;
  align-items:flex-start;
  gap:12px;
  width:100%;
}

.card.post .post-speech-avatar{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  flex:0 0 52px;
  overflow:hidden;
  border-radius:50%;
  background:var(--wine);
  color:rgba(var(--cream-rgb),.72);
  box-shadow:0 0 0 1px rgba(255,255,255,.12);
}

.card.post .post-speech-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.card.post .post-body{
  flex:0 1 auto;
  width:100%;
  max-width:24ch;
  margin:0;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px 18px 18px 6px;
  background:rgba(255,255,255,.06);
  text-shadow:none;
}

.card.post .post-flirt-form{
  width:100%;
  background:rgba(255,255,255,.06);
}

/* The prompt now has its own readable surface. */
.card.post::after{
  display:none;
}

/* Fullscreen mobile keeps clearance for the floating navigation. */
@media (max-width:900px){
  .card.post{
    --post-panel-h:220px;
    --post-panel-edge:12px;
    --post-bottom-clear:var(--bar-h,96px);
  }
}

.card.post .post-conversation-log{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:0;
  overflow:hidden;
}

.card.post .post-quick-chat[hidden]{
  display:none;
}

.card.post .post-quick-chat{
  display:grid;
  gap:8px;
  width:100%;
  min-height:0;
}

.card.post .post-quick-msg{
  justify-self:start;
  display:flex;
  align-items:flex-end;
  gap:10px;
  max-width:82%;
}

.card.post .post-quick-msg.mine{
  justify-self:end;
  flex-direction:row-reverse;
}

.card.post .post-quick-avatar{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  flex:0 0 52px;
  overflow:hidden;
  border-radius:50%;
  background:var(--wine);
  color:rgba(var(--cream-rgb),.72);
  box-shadow:0 0 0 1px rgba(255,255,255,.12);
}

.card.post .post-quick-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.card.post .post-quick-bubble{
  padding:10px 13px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px 18px 18px 6px;
  background:rgba(255,255,255,.06);
}

.card.post .post-quick-msg.mine .post-quick-bubble{
  border-radius:18px 18px 6px 18px;
  border-color:rgba(var(--flare-rgb),.35);
  background:rgba(var(--flare-rgb),.16);
}

.card.post .post-quick-bubble p{
  margin:0;
  overflow-wrap:anywhere;
}

.card.post .post-flirt-form{
  flex:0 0 auto;
}

.card.post .post-flirt-form.is-waiting{
  opacity:.78;
}

.card.post .post-flirt-form.is-waiting .post-flirt-input{
  cursor:default;
}

/* === FEED CARD: MEDIA + CONVERSATION END === */

/* === FEED FLIRT CARD ===
   The card owns a fixed media territory and external action rail.
   The actual attachment keeps its stored aspect ratio. */

.card.post{
  --post-media-edge:18px;
  --post-media-radius:24px;
  --post-control-w:64px;
  --post-control-gap:12px;
  --post-media-top:calc(var(--head-h,71px) + 14px);

  /* One knob: the band is whatever the avatar needs, so changing the
     avatar per breakpoint moves the band with it. */
  --post-avatar-h:52px;
  --post-band-h:calc(var(--post-avatar-h) + 4px);

  /* Air between the identity and the top of the picture. */
  --post-band-gap:14px;

  /* The same frame the site header lays itself out in, so the rail ends
     exactly where the header's buttons end and the identity starts
     where the brand starts. */
  --post-frame:min(1180px, 100% - var(--pad) * 2);

  /* One column for the picture, the same width whatever shape the
     picture is. Everything else on the card hangs off its edges, so a
     landscape photo and a portrait reel put the identity and the rail
     in exactly the same place. Capped, so the picture does not sprawl
     on a wide screen. */
  --post-col:min(
    480px,
    var(--post-frame) - var(--post-control-gap) - var(--post-control-w)
  );
}

/* Fixed territory. The final strip on the right belongs to card actions. */
.card.post .post-media{
  margin:var(--post-band-gap) 0 18px;

  display:flex;
  /* Top of the row, not the middle of it: the identity sits on this
     edge, and a picture floating in the centre leaves it attached to
     nothing. */
  align-items:flex-start;
  justify-content:center;

  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

/* Single photos use their stored dimensions as the attachment shape. */
.card.post .post-photo-attachment{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;

  width:auto;
  height:100%;
  max-width:100%;
  max-height:100%;
  aspect-ratio:var(--media-ratio, 1 / 1);

  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--post-media-radius);
  background:transparent;
  box-shadow:0 16px 40px rgba(0,0,0,.20);
}

.card.post .post-photo-attachment .gal-1,
.card.post .post-photo-attachment .gal-1 .tile{
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  border:0;
  border-radius:inherit;
  background:transparent;
  box-shadow:none;
}

.card.post .post-photo-attachment .gal-1 img{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:cover;
  object-position:center;
  border-radius:inherit;
}

/* Multi-photo posts keep the existing gallery composition. */
.card.post .post-media .gal:not(.gal-1){
  width:100%;
  height:100%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--post-media-radius);
  box-shadow:0 16px 40px rgba(0,0,0,.20);
}

/* Video itself is the attachment. */
.card.post .post-media .feed-reel{
  position:relative;
  width:auto;
  height:100%;
  max-width:100%;
  max-height:100%;
  aspect-ratio:var(--media-ratio, 9 / 16);

  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--post-media-radius);

  /* The poster is painted here, not on the video: setting a source
     clears the poster attribute, so JS hands it to this box instead.
     It has to be framed exactly as the video is — cover, centred —
     or the handoff to the first frame is a visible jump. */
  background:transparent center/cover no-repeat;

  box-shadow:0 16px 40px rgba(0,0,0,.20);
}

.card.post .post-media .feed-video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  background:transparent;
}

/* Header now owns only card-level controls such as the menu. */


/* Card's top-left, whatever the post carries — the position posts
   without media already used. Attached to the media it moved with the
   attachment's shape, so a portrait reel and a landscape photo put the
   same avatar in two different places. */
.card.post > .post-identity{
  grid-row:2;
  grid-column:2;
  z-index:4;

  display:flex;
  align-items:center;
  gap:10px;

  min-width:0;
  height:100%;
  margin:0;
  padding:0;
  pointer-events:auto;
}

.card.post .post-identity .post-avatar{
  flex:0 0 auto;
}

.card.post .post-identity .post-who{
  min-width:0;
}

.card.post .post-identity .post-name{
  text-shadow:none;
}

/* Sound belongs to the actual video attachment. */
.card.post .post-media .feed-reel > .feed-sound{
  position:absolute;
  top:12px;
  right:12px;
  bottom:auto;
  left:auto;
  z-index:4;
  margin:0;
}

/* Three-dot menu starts the fixed external action column. */
.card.post .post-rail .menu{
  position:relative;
  z-index:4;

  width:var(--post-control-w);
  margin:0;
  display:grid;
  justify-items:center;
  pointer-events:auto;
}

.card.post .post-rail .menu > summary{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  margin:0;
}

/* Like/save continue on the same external axis. */
/* Menu, like and save are one stack in one box. Two boxes sharing a
   column is what put the dots off the heart's axis; siblings cannot
   disagree about where the middle is. */
.card.post .post-rail{
  grid-row:2 / 4;
  grid-column:4;

  /* The narrow-screen rule above sets right:12px for an absolute rail.
     Relative keeps that as an offset and drags the box 12px left of the
     track the grid put it in, so the offsets are cleared here. */
  position:relative;
  top:auto;
  right:auto;
  bottom:auto;
  left:auto;

  align-self:start;
  width:var(--post-control-w);
  z-index:3;

  display:grid;
  gap:18px;
  justify-items:center;
  align-content:start;
}

/* Conversation remains the stable lower surface. */
.card.post .post-foot-stack{
  border-radius:24px 24px 20px 20px;
}

.card.post .post-foot-stack.has-conversation .post-speech{
  display:none;
}

.card.post .post-foot-stack.has-conversation .post-conversation-log{
  justify-content:center;
}

@media (min-width:901px){
  .card.post{
    --post-media-edge:20px;

    /* The header only overlays the card on a phone, where it is fixed.
       Here it is sticky and the card already begins beneath it, so a
       header's worth of clearance is just empty card. */
    --post-media-top:14px;
  }
}

/* Phones, last so it wins: the block above sets these unconditionally
   and later in the file, and a media query carries no extra weight. */
@media (max-width:900px){
  .card.post{
    /* Narrower card, and the picture is the point: the 52px that reads
       as balanced on a wide screen crowds it here. */

    /* Same button size as the site header's. */
    --post-control-w:38px;
  }
}

/* A live card is a post card: the stream sits in the picture column on
   the same terms as a photo or a reel, rather than filling a box that
   no longer exists. */
.card.post .post-media .feed-live{
  position:relative;
  inset:auto;

  width:auto;
  height:100%;
  max-width:100%;
  max-height:100%;
  aspect-ratio:var(--media-ratio, 9 / 16);

  display:block;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--post-media-radius);
  background:#000 50% 30%/cover;
}

.card.post .post-media .feed-live video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;

  /* Nothing to show until a track arrives; .on is added on playing. */
  opacity:0;
  transition:opacity .2s ease;
}

.card.post .post-media .feed-live.on video{
  opacity:1;
}

.card.post .post-media .feed-live .live-pill{
  position:absolute;
  top:12px;
  left:12px;
  z-index:2;
}

/* The way into a live room, sitting in the panel between the title and
   the reply box. Full width, because it is the card's main offer — the
   composer below it is the quieter one. */
.card.post .post-join{
  display:block;
  margin:0 0 10px;
  padding:12px 16px;

  border-radius:999px;
  background:var(--flare);
  color:var(--ink);

  font:700 15px/1 var(--font);
  text-align:center;
  text-decoration:none;
}

.card.post .post-join:hover{
  filter:brightness(1.05);
}

/* === FEED FLIRT CARD END === */