/* Layout: the night-city illustration is the page. It stays fixed and drifts slowly on scroll (parallax).
   Glass panels sit in a column on the right so the cat on the left stays in view; on phones the column is full width.
   Single dark look by choice: the glass takes its colour from the picture. */
:root{
  color-scheme:dark;

  --night:#070b24; --ink:#0c1340; --text:#f4f6ff; --soft:#c3cbee; --neon:#9fdcff; --lantern:#ffb07a;
  --glass:rgba(14,22,66,.38); --glass-strong:rgba(10,16,52,.62); --edge:rgba(255,255,255,.26); --edge-dim:rgba(255,255,255,.10);
  --display:'Bai Jamjuree','Anuphan',system-ui,sans-serif; --body:'Anuphan','Bai Jamjuree',system-ui,sans-serif;
  --r-lg:28px; --r-md:18px;
}
body{background:var(--night);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.6;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0;-webkit-font-smoothing:antialiased;overflow-x:hidden}
[data-lang="th"] .en{display:none}
[data-lang="en"] .th{display:none}
svg{flex:none}

.scene{position:fixed;inset:-8% 0 -8% 0;z-index:0;background:var(--night) url("/bg.webp") 24% 50%/cover no-repeat;will-change:transform;transform:translate3d(0,0,0) scale(1.06)}
.veil{position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(7,11,36,.15) 0%,rgba(7,11,36,0) 30%,rgba(7,11,36,.55) 100%);opacity:var(--veil,.6)}

/* liquid glass material */
.glass{position:relative;background:var(--glass);border:1px solid var(--edge-dim);border-radius:var(--r-lg);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  box-shadow:inset 0 1px 0 var(--edge),inset 0 -1px 0 rgba(255,255,255,.05),inset 0 0 28px rgba(159,220,255,.07),0 10px 30px rgba(3,6,28,.4)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 70%,rgba(159,220,255,.10) 100%)}
.glass>*{position:relative}
.i{display:block}
@media (prefers-reduced-transparency:reduce){.glass{background:#0e1648;-webkit-backdrop-filter:none;backdrop-filter:none}}

.page{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding-block:16px 56px}
.dock{position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px);z-index:5;display:flex;align-items:center;gap:6px;width:max-content;max-width:100%;margin-left:auto;padding:6px;border-radius:999px}
.dock a,.dock button{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:500;color:var(--text);transition:background .2s}
.dock a:hover,.dock button:hover{background:rgba(255,255,255,.14)}
.dock a:focus-visible,.dock button:focus-visible,.row:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
.dock svg{width:16px;height:16px}
.dock .sep{width:1px;height:20px;background:var(--edge-dim)}
@media (max-width:520px){.dock a span{display:none}.dock a{padding:0 12px}}

.col{width:min(100%,460px);margin-left:auto;display:flex;flex-direction:column;gap:16px}
@media (max-width:820px){.col{margin-inline:auto}}

.hero{min-height:min(52vh,460px);display:flex;align-items:flex-end;padding-block:24px 8px}
.who{padding:22px;width:100%}
.who .top{display:flex;align-items:center;gap:16px}
.avatar{width:72px;height:72px;border-radius:50%;flex:none;background:url("/avatar.webp") center/cover no-repeat;border:1px solid var(--edge);box-shadow:0 0 0 4px rgba(255,255,255,.08)}
h1{font-family:var(--display);font-weight:700;font-size:clamp(30px,8vw,38px);line-height:1.05;letter-spacing:-.01em;margin:0}
.handle{color:var(--soft);font-size:15px;margin:4px 0 0}
.bio{margin:16px 0 0;font-size:16px;text-wrap:pretty}
.likes{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.like{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid var(--edge-dim);font-size:14px}
.like svg{width:15px;height:15px;color:var(--neon)}

.panel{padding:20px 14px 14px;scroll-margin-top:84px}
h2{font-family:var(--display);font-weight:600;font-size:20px;margin:0 8px 2px;display:flex;align-items:center;gap:10px}
h2 svg{width:20px;height:20px;color:var(--lantern)}
.hint{margin:0 8px 12px;color:var(--soft);font-size:14px}
.list{display:flex;flex-direction:column;gap:8px}
.row{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 14px;border-radius:var(--r-md);background:rgba(255,255,255,.07);border:1px solid var(--edge-dim);transition:background .2s,border-color .2s,transform .2s}
.row:hover{background:rgba(255,255,255,.15);border-color:var(--edge)}
.row:active{transform:scale(.985)}
.row .ic{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(159,220,255,.14);color:var(--neon);flex:none}
.row .ic svg{width:19px;height:19px}
.row.warm .ic{background:rgba(255,176,122,.16);color:var(--lantern)}
.row .t{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.row .t b{font-weight:600;font-size:15.5px}
.row .t small{color:var(--soft);font-size:13.5px;overflow-wrap:anywhere}
.row .end{margin-left:auto;color:var(--soft);display:inline-flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap}
.row .end svg{width:16px;height:16px}
.row.static{cursor:default}
.row.static:hover{background:rgba(255,255,255,.07);border-color:var(--edge-dim)}
.num{width:38px;text-align:center;font-family:var(--display);font-weight:600;color:var(--soft);font-variant-numeric:tabular-nums;flex:none}
.todo{display:inline-block;padding:1px 8px;border-radius:999px;border:1px dashed var(--edge);color:var(--soft);font-size:12px}
.qr{display:flex;flex-direction:column;gap:12px}
.qrbox{margin:0;padding:4px 0 6px;display:flex;flex-direction:column;gap:12px;align-items:center}
.qrbox[hidden]{display:none}
.qrbox img{width:min(100%,300px);height:auto;border-radius:var(--r-md);display:block}
.qrbox figcaption{color:var(--soft);font-size:14px;text-align:center;max-width:32ch}
#qrbtn[aria-expanded="true"] .end svg{transform:rotate(180deg)}
#qrbtn .end svg{transition:transform .2s}
footer{margin-top:8px;text-align:center;color:var(--soft);font-size:13px;text-shadow:0 1px 8px rgba(3,6,28,.9)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.scene{transform:scale(1.06)!important}}

@media (max-width:820px){.scene{background-image:url("/bg-sm.webp")}}