/* Light "field journal" look: warm paper ground, one accent per channel, a live scene at the top of each page */
:root{
  --paper:#ece3d3; --card:#ffffff; --ink:#1f2233; --muted:#5f6276; --line:#ddd1bc;
  --brand:#f2564e; --accent:var(--brand); --tint:#fdeceb;
  --display:"Fraunces", Georgia, "Times New Roman", serif;
  --body:"Inter", "Segoe UI", system-ui, sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.65 var(--body);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0;
  background-image:radial-gradient(circle at 1px 1px, #d7c9b0 1px, transparent 0);background-size:22px 22px}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:12px}
#ambient{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.page{position:relative;z-index:1}
.wrap{max-width:1040px;margin:0 auto;padding-block:40px 24px}
.narrow{max-width:640px}
.orbit{width:120px;height:40px;color:var(--accent);display:block;margin:0 auto}
.eyebrow{font:600 12px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.01em;text-wrap:balance;margin:0}

/* ---------- Live scene + optional cover photo ---------- */
.stage{position:relative;overflow:hidden;max-width:100%;
  background:linear-gradient(160deg,var(--tint),#fff 75%)}
.stage .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s ease}
.stage .wash{position:absolute;inset:0;background:rgba(251,248,243,.55);opacity:0;transition:opacity .4s ease}
.stage.has-photo .wash{opacity:1}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

.avatar{position:relative;overflow:hidden;border-radius:50%;display:grid;place-items:center;
  font:800 28px/1 var(--display);color:var(--accent);background:var(--tint);
  border:5px solid #fff;box-shadow:0 8px 24px rgba(31,34,51,.12)}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.cover-banner{aspect-ratio:3/1;max-width:100%;border-radius:22px;overflow:hidden;border:1px solid var(--line);box-shadow:0 2px 0 var(--line);background:var(--tint)}
.cover-banner img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .4s ease}
.scene-card{aspect-ratio:900/390;border-radius:22px;border:1px solid var(--line);box-shadow:0 2px 0 var(--line);margin-top:22px}
.avatar{background:#fff}

/* ---------- Hub ---------- */
.hero{text-align:center;display:grid;gap:14px;justify-items:center;padding-block:12px 30px}
.hero h1{font-size:clamp(36px,7vw,64px);line-height:1.05}
.hero p{color:var(--muted);max-width:56ch;margin:0;font-size:18px}
.meta{font-size:14px;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:900px){.cards{grid-template-columns:1fr;max-width:560px;margin:0 auto}}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;text-decoration:none;
  display:flex;flex-direction:column;box-shadow:0 2px 0 var(--line);transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(31,34,51,.10)}
.card .stage{aspect-ratio:900/390}
.card .body{padding:0 22px 22px;display:grid;gap:8px;min-width:0;flex:1;align-content:start}
.card .avatar{width:80px;height:80px;margin-top:-40px;font-size:24px;z-index:1}
.card h2{font-size:clamp(17px,1.9vw,21px);white-space:nowrap;letter-spacing:-.015em}
@media (max-width:900px){.card h2{font-size:23px}}
.card p{margin:0;color:var(--muted);font-size:15px}
.card .go{font-weight:600;font-size:14px;color:var(--accent);margin-top:auto}
.dots{display:flex;gap:6px;margin-top:4px}
.dots span{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#fff}
.dots svg{width:15px;height:15px}

/* ---------- Channel page ---------- */
.banner{aspect-ratio:900/390;border-radius:24px;border:1px solid var(--line);box-shadow:0 2px 0 var(--line)}
.profile{display:grid;justify-items:center;text-align:center;gap:10px;position:relative;z-index:1}
.cover-banner + .profile{margin-top:-58px}
.profile .avatar{width:124px;height:124px;font-size:40px;border-width:6px}
.profile h1{font-size:clamp(30px,6vw,44px);line-height:1.1;overflow-wrap:anywhere}
.profile p{margin:0;color:var(--muted);max-width:48ch;font-size:17px}
@media (max-width:520px){.cover-banner,.scene-card{border-radius:16px}.cover-banner + .profile{margin-top:-44px}.profile .avatar{width:96px;height:96px;font-size:30px;border-width:5px}}
.links{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.link{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;text-decoration:none;
  background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 14px 12px 12px;
  box-shadow:0 2px 0 var(--line);transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease}
.link:hover{transform:translateY(-2px);border-color:var(--p);box-shadow:0 10px 24px rgba(31,34,51,.08)}
.link .icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--p);color:#fff}
.link .icon svg{width:26px;height:26px}
.link .meta2{min-width:0}
.link .name{display:block;font:700 18px/1.2 var(--display)}
.link .handle{display:block;font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.link .cta{font:600 14px/1 var(--body);color:var(--p);border:1.5px solid var(--p);border-radius:999px;padding:9px 14px;white-space:nowrap}
.link:hover .cta{background:var(--p);color:#fff}
@media (max-width:420px){.link{grid-template-columns:46px 1fr}.link .icon{width:46px;height:46px}.link .cta{display:none}}
.actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:24px}
.btn{font:600 14px/1 var(--body);border-radius:999px;padding:12px 18px;cursor:pointer;text-decoration:none;
  border:1.5px solid var(--accent);background:var(--accent);color:#fff}
.btn.ghost{background:transparent;color:var(--accent)}
.others{margin-top:40px;text-align:center;display:grid;gap:14px}
.others h3{font-size:20px}
.others .row{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.others a{text-decoration:none;display:grid;justify-items:center;gap:6px;font-size:13px;font-weight:600;line-height:1.3;width:120px;text-align:center;overflow-wrap:anywhere}
.others .avatar{width:64px;height:64px;font-size:20px;border-width:3px}

footer{text-align:center;color:var(--muted);font-size:13px;padding-block:28px 36px}
/* ---------- Flower burst over a clicked channel logo ---------- */
.flower-burst{position:fixed;inset:0;z-index:100;pointer-events:none;overflow:hidden}
.flower-burst span{position:absolute;display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.18))}
.flower-burst svg{display:block}
.avatar.logo-pop{animation:logoPop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes logoPop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}

/* ---------- Cute cats that walk out of the follow buttons ---------- */
.links > li.has-cat{position:relative;z-index:1}
.links > li.cat-on{z-index:8}
.links > li.has-cat > .link{position:relative;z-index:2}
.cat2{position:absolute;z-index:1;left:0;bottom:calc(100% - 4px);width:84px;height:66px;pointer-events:none;
  transform:translate(var(--x,54px),92%);opacity:0;transition:transform 1.3s cubic-bezier(.45,.05,.4,1),opacity .25s ease}
.cat2.out{opacity:1}
.cat2.out.walking,.cat2.out.pointing,.cat2.out.thanks{transform:translate(var(--x,54px),0)}
.cat2:not(.out){transition:transform .45s ease,opacity .35s ease .1s}
.cat2-body{width:100%;height:100%}
.cat2 svg{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 3px 4px rgba(0,0,0,.18))}
.cat2 .leg,.cat2 .paw,.cat2 .tail,.cat2 .head{transform-box:fill-box}
.cat2 .leg{transform-origin:50% 0}
.cat2 .paw{transform-origin:30% 0;transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.cat2 .tail{transform-origin:100% 100%;animation:cat2tail 1.6s ease-in-out infinite}
.cat2 .head{transform-origin:30% 80%}
.cat2 .bouquet{opacity:0;transition:opacity .25s ease .2s}
.cat2.walking .cat2-body{animation:cat2bob .35s ease-in-out infinite}
.cat2.walking .lb1,.cat2.walking .paw{animation:cat2stepA .35s ease-in-out infinite}
.cat2.walking .lb2,.cat2.walking .lf1{animation:cat2stepB .35s ease-in-out infinite}
.cat2.pointing .paw,.cat2.thanks .paw{transform:rotate(-78deg)}
.cat2.pointing .head{animation:cat2nod 1.2s ease-in-out infinite}
.cat2.thanks .bouquet{opacity:1}
.cat2.thanks .head{animation:cat2nod .9s ease-in-out infinite}
.cat2-say{position:absolute;bottom:88%;left:58%;white-space:nowrap;font:800 13px/1 var(--body);color:#1f2233;background:#fff;
  border:2px solid #1f2233;border-radius:14px;padding:7px 11px;transform:scale(0);transform-origin:0 100%;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.cat2-say:empty{display:none}
.cat2.pointing .cat2-say,.cat2.thanks .cat2-say{transform:scale(1)}
.cat2.thanks .cat2-say{border:none;background:none;padding:0;bottom:96%;left:20%}
.ty{display:inline-block;font:900 26px/1 var(--body);letter-spacing:.01em;color:#e6366e;
  background:linear-gradient(90deg,#ff3d77,#ff9f1c,#ffd60a,#2ec4b6,#3a86ff,#8338ec);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 #fff) drop-shadow(0 3px 6px rgba(0,0,0,.18));animation:tyPop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes cat2stepA{0%,100%{transform:rotate(18deg)}50%{transform:rotate(-18deg)}}
@keyframes cat2stepB{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(18deg)}}
@keyframes cat2bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes cat2tail{0%,100%{transform:rotate(0)}50%{transform:rotate(12deg)}}
@keyframes cat2nod{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg)}}
@keyframes tyPop{0%{transform:scale(.3) rotate(-8deg)}100%{transform:scale(1) rotate(0)}}
@media (max-width:420px){.cat2{width:70px;height:55px}.ty{font-size:22px}}
@media (prefers-reduced-motion:reduce){.cat2,.cat2 *{transition:none!important;animation:none!important}}

.rem{position:fixed;z-index:30;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));
  width:210px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 14px 40px rgba(31,34,51,.2)}
.rem .r-stage{display:block;position:relative;aspect-ratio:900/390;width:100%}
.rem .rem-label{display:block;padding:6px 10px;font:600 11px/1.2 var(--body);color:var(--accent);letter-spacing:.06em;text-transform:uppercase}
.rem-min{position:absolute;top:6px;right:6px;z-index:2;width:24px;height:24px;border-radius:50%;border:none;background:rgba(0,0,0,.4);color:#fff;font:600 15px/1 var(--body);cursor:pointer}
.rem-fab{position:fixed;z-index:30;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;background:var(--accent);color:#fff;font:600 20px/1 var(--body);box-shadow:0 10px 26px rgba(31,34,51,.25)}
@media (max-width:560px){.rem{width:132px}.rem .rem-label{font-size:10px;padding:5px 8px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}