@import url('https://fonts.googleapis.com/css2?family=Literata:opsz,wght@7..72,600;7..72,700&family=Sora:wght@400;500;600;700;800&display=swap');
:root{
  --ink:#140c12; --night:#1a1016; --foam:#f6e6ea; --mute:#c4a8b2; --rose:#e11d74; --coral:#f0734a;
  --bubble:#24151c; --hair:rgba(246,230,234,.12); --strip:#1f1219; --void:#120a0f;
  --champ:#e8c4a0;
  --display:'Literata',Georgia,serif; --sans:'Sora',system-ui,sans-serif;
  --pad:clamp(1rem,4vw,1.4rem); --safe-b:env(safe-area-inset-bottom,0px); --safe-r:env(safe-area-inset-right,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:
  radial-gradient(ellipse 70% 40% at 12% -6%,rgba(225,29,116,.26),transparent 58%),
  radial-gradient(ellipse 40% 30% at 92% 8%,rgba(232,196,160,.12),transparent 48%),
  linear-gradient(165deg,#10080c 0%,#1a1016 42%,#120a0f 100%);
  color:var(--foam);font-family:var(--sans);line-height:1.62;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--champ)} a:hover{color:#ffe0c0}
.shell{width:min(920px,100%);margin:0 auto;padding-inline:var(--pad)}
.qf-bar{position:sticky;top:0;z-index:40;backdrop-filter:blur(14px);background:rgba(16,8,12,.94);border-bottom:1px solid var(--hair)}
.qf-bar-row{display:flex;align-items:center;justify-content:space-between;padding:.7rem 0;gap:.75rem}
.mark{font-family:var(--display);font-size:clamp(1.2rem,3.6vw,1.5rem);font-weight:700;color:var(--foam);text-decoration:none;letter-spacing:-.02em}
.mark b{font-weight:700;color:var(--rose)}
.links{display:flex;gap:.55rem;align-items:center;flex-wrap:nowrap}
.links a{color:var(--mute);text-decoration:none;font-size:.84rem;font-weight:700;white-space:nowrap}
.links a:hover{color:var(--foam)}
.ping-btn,.hit,.dock-ping{background:linear-gradient(135deg,var(--rose),var(--coral));color:#1a050c!important;font-weight:800;text-decoration:none;border-radius:999px;box-shadow:0 10px 26px rgba(225,29,116,.32)}
.ping-btn{padding:.48rem 1rem;font-size:.82rem}
/* ONE composition stage — no dual hero-visual/hero-shot clone */
.stage{position:relative;min-height:clamp(280px,58vw,460px);display:grid;align-items:end;isolation:isolate;border-bottom:1px solid var(--hair)}
.stage-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.stage-bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:saturate(1.05) contrast(1.05)}
.stage::after{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(16,8,12,.15) 0%,rgba(16,8,12,.55) 45%,rgba(16,8,12,.92) 100%),
  linear-gradient(90deg,rgba(225,29,116,.18),transparent 55%)}
.stage-ink{position:relative;z-index:2;padding:1.6rem var(--pad) 1.35rem;width:min(920px,100%);margin:0 auto}
.kicker{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--champ);font-weight:800;margin:0 0 .4rem}
.stage h1{font-family:var(--display);font-size:clamp(1.9rem,6.2vw,3rem);line-height:1.05;margin:0 0 .5rem;letter-spacing:-.03em;color:#fff}
.blurb{font-size:clamp(.95rem,2.6vw,1.05rem);color:rgba(246,230,234,.86);margin:0 0 .9rem;max-width:32rem}
.acts{display:flex;gap:.65rem;flex-wrap:wrap;align-items:center}
.hit{padding:.72rem 1.25rem;font-size:.92rem;display:inline-flex}
.side{color:var(--foam);font-weight:700;text-decoration:none;border-bottom:1px dashed rgba(246,230,234,.35);padding:.2rem 0}
.fine{font-size:.76rem;color:rgba(196,168,178,.9);margin:.65rem 0 0;max-width:34rem}
/* messenger unread bubbles — primary IA */
.bubbles{padding:.45rem 0 .85rem;overflow:hidden;background:rgba(0,0,0,.18);border-bottom:1px solid var(--hair)}
.bubble-scroller{display:flex;gap:.5rem;overflow-x:auto;padding:.5rem var(--pad) .85rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.bubble-scroller::-webkit-scrollbar{display:none}
.bubble{flex:0 0 auto;scroll-snap-align:start;text-decoration:none;color:var(--foam);
  background:var(--bubble);border:1px solid rgba(225,29,116,.3);border-radius:1.4rem 1.4rem 1.4rem .35rem;
  padding:.55rem .95rem .55rem .7rem;display:flex;align-items:center;gap:.5rem;min-height:2.6rem;
  box-shadow:0 6px 0 rgba(0,0,0,.22)}
.bubble .unread{width:.5rem;height:.5rem;border-radius:50%;background:var(--coral);box-shadow:0 0 0 3px rgba(240,115,74,.22);flex:0 0 auto}
.bubble .name{font-size:.84rem;font-weight:700;white-space:nowrap}
.bubble.is-here,.bubble:hover{border-color:var(--rose);background:linear-gradient(180deg,#2c1520,#1a0c12);transform:translateY(-1px);color:#fff}
.bubble.is-here .unread{background:var(--rose)}
.feed{padding:.2rem 0 calc(5.2rem + var(--safe-b))}
.msg{padding:1.1rem 0;border-bottom:1px solid var(--hair)}
.msg .shell{ }
.msg-card{background:var(--strip);border:1px solid var(--hair);border-radius:1rem 1rem 1rem .25rem;padding:1rem 1.05rem;margin:.55rem 0;box-shadow:0 12px 28px rgba(0,0,0,.28);position:relative}
.msg-card::before{content:"";position:absolute;left:.85rem;top:-6px;width:12px;height:12px;background:var(--strip);border-left:1px solid var(--hair);border-top:1px solid var(--hair);transform:rotate(45deg)}
.msg h2{font-family:var(--display);font-size:clamp(1.2rem,3.8vw,1.5rem);margin:0 0 .45rem;color:#fff}
.msg h3{font-size:1.02rem;margin:.85rem 0 .3rem;color:var(--champ)}
.msg .note,.msg p{color:var(--mute);margin:0 0 .7rem}
.msg .lede{font-size:1.05rem;color:var(--foam);margin:0 0 .75rem;max-width:40rem}
.msg ul,.msg ol{padding-left:1.15rem;color:var(--mute)}
.msg li{margin:.25rem 0}
.msg blockquote{margin:1rem 0;padding:.9rem 1rem;border-left:3px solid var(--coral);background:rgba(225,29,116,.1);font-family:var(--display);font-size:1.12rem;color:#fff;border-radius:0 .45rem .45rem 0}
.msg details{border:1px solid var(--hair);border-radius:.75rem;padding:.55rem .75rem;margin:.5rem 0;background:rgba(255,255,255,.03)}
.msg summary{cursor:pointer;font-weight:700;color:#fff}
.msg table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.9rem;background:rgba(0,0,0,.2);border-radius:.45rem;overflow:hidden}
.msg th,.msg td{border:1px solid var(--hair);padding:.5rem .6rem;text-align:left}
.msg th{background:rgba(225,29,116,.18);color:#fff}
.tagrow{list-style:none;padding:0;margin:.6rem 0 0;display:flex;flex-wrap:wrap;gap:.45rem}
.tagrow li{background:rgba(225,29,116,.12);border:1px solid rgba(225,29,116,.35);border-radius:999px;padding:.35rem .75rem;font-size:.82rem;color:var(--foam);font-weight:650}
.panels{display:grid;gap:.7rem;margin-top:.6rem}
.panels-2,.panels-3,.panels-4{grid-template-columns:1fr}
.panel{background:rgba(255,255,255,.03);border:1px solid var(--hair);border-radius:.85rem;padding:.85rem .9rem}
.panel h3{margin-top:0;color:#fff}
.invite{background:linear-gradient(105deg,rgba(225,29,116,.2),rgba(240,115,74,.1));border-top:1px solid rgba(225,29,116,.35);border-bottom:1px solid rgba(240,115,74,.2)}
.invite p{color:#fff;font-weight:700;margin:0 0 .7rem}
.qf-end{border-top:1px solid var(--hair);padding:1.15rem 0 calc(4.6rem + var(--safe-b));color:var(--mute);font-size:.82rem}
.qf-end nav{display:flex;flex-wrap:wrap;gap:.5rem .85rem;margin-bottom:.55rem}
.qf-end a{color:var(--mute);text-decoration:none;font-weight:600}
.dock-ping{position:fixed;right:max(.75rem,var(--safe-r));bottom:max(.75rem,var(--safe-b));z-index:50;padding:.8rem 1.15rem;font-size:.84rem;display:inline-flex;align-items:center;gap:.35rem}
@media(min-width:720px){
  .panels-2{grid-template-columns:1fr 1fr}
  .panels-3{grid-template-columns:1fr 1fr 1fr}
  .panels-4{grid-template-columns:1fr 1fr}
}
@media(min-width:900px){
  .panels-4{grid-template-columns:1fr 1fr 1fr 1fr}
  .stage{min-height:420px}
  .bubble-scroller{padding-left:0;padding-right:0;width:min(920px,100%);margin:0 auto}
}
@media(max-width:899px){
  .links a:not(.ping-btn):not(.mob){display:none}
}
@media(min-width:900px){
  .links a.mob{display:none}
}