/* Liv 的 Threads 存檔 — one reading column like a Threads feed; her words in serif, the site's labels in sans.
   Palette: white paper, mist-blue accents. */
:root{
  --paper:#ffffff; --card:#f7f9fb; --ink:#2c343c; --muted:#6f7c89; --line:#e5eaef;
  --accent:#5a7891; --accent-soft:#e1e9f0; --mark:#d3e0eb; --veil:#eef2f6;
  --serif:"Noto Serif TC","Songti TC","PMingLiU",serif;
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --col:640px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#171b20; --card:#1f252c; --ink:#e3e8ed; --muted:#97a3b0; --line:#2d353e;
  --accent:#a3bbd0; --accent-soft:#283441; --mark:#36495d; --veil:#222a32; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#171b20; --card:#1f252c; --ink:#e3e8ed; --muted:#97a3b0; --line:#2d353e;
  --accent:#a3bbd0; --accent-soft:#283441; --mark:#36495d; --veil:#222a32; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:var(--col);margin:0 auto;padding-block:0 64px}
a{color:var(--accent)}
img{max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}

/* top bar */
.bar{position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;padding-block:10px;margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px))}
.bar-in{max-width:var(--col);margin:0 auto;width:100%;display:flex;align-items:center;gap:12px}
.brand{font-family:var(--serif);font-weight:700;text-decoration:none;color:var(--ink);font-size:16px;white-space:nowrap}
.brand small{font-family:var(--sans);font-weight:400;color:var(--muted);font-size:12.5px;margin-left:6px}
.bar nav{margin-left:auto;display:flex;gap:14px;font-size:14px}
.bar nav a{text-decoration:none;white-space:nowrap}

/* notice + profile */
.notice{margin-top:16px;padding:10px 14px;border:1px solid var(--accent);border-radius:10px;background:var(--accent-soft);font-size:13.5px}
.notice b{color:var(--accent)}
.profile{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding-block:26px 14px;align-items:start}
.profile h1{margin:0;font-family:var(--serif);font-weight:700;font-size:28px;letter-spacing:.02em;text-wrap:balance}
.handle{color:var(--muted);font-size:14px}
.avatar{grid-row:1/3;grid-column:2;width:72px;height:72px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-family:var(--serif);font-size:24px;font-weight:700;border:1px solid var(--line)}
.bio{grid-column:1/-1;margin:10px 0 0;font-family:var(--serif);white-space:pre-line;font-size:14.5px}
.stats{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--muted);font-size:13px;margin-top:8px;font-variant-numeric:tabular-nums}
.stats b{color:var(--ink);font-weight:500}

/* page heading for month / tag / search pages */
.page-h{padding-block:24px 6px}
.page-h h1{margin:0;font-family:var(--serif);font-size:24px;text-wrap:balance}
.page-h p{margin:6px 0 0;color:var(--muted);font-size:13.5px}
.crumbs{font-size:13px;color:var(--muted);margin-top:16px;display:flex;flex-wrap:wrap;gap:4px 8px}
.crumbs a{text-decoration:none}

/* tag strip */
.tags{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-block:10px;border-bottom:1px solid var(--line)}
.tags a{flex:none;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:13px;text-decoration:none;color:var(--ink);white-space:nowrap}
.tags a[aria-current="page"]{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.tags a span{color:var(--muted);margin-left:4px;font-variant-numeric:tabular-nums}
.tags a[aria-current="page"] span{color:inherit;opacity:.8}

/* feed */
.feed{display:flex;flex-direction:column}
.post{padding-block:18px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:40px 1fr;gap:0 12px}
.dot{width:40px;height:40px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:14px}
.body{min-width:0}
.meta{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:13px;color:var(--muted)}
.meta .who{color:var(--ink);font-weight:700;font-size:14px}
.meta time{font-variant-numeric:tabular-nums}
.tag{padding:1px 8px;border-radius:6px;background:var(--accent-soft);color:var(--accent);font-size:12px;text-decoration:none}
.text{font-family:var(--serif);white-space:pre-wrap;word-break:break-word;margin:4px 0 0;font-size:15.5px;line-height:1.75}
.more{display:inline-block;margin-top:4px;font-size:14px;text-decoration:none}
mark{background:var(--mark);color:inherit;border-radius:3px;padding:0 1px}
.foot{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:10px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.foot a{text-decoration:none}
.quote{margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:13.5px;color:var(--muted)}

/* media */
.media{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px;margin-top:10px}
.media a,.media figure{display:block;margin:0;position:relative}
.media img{width:100%;height:180px;object-fit:cover;border-radius:10px;border:1px solid var(--line);display:block;background:var(--veil)}
.media .plus{position:absolute;inset:0;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--ink) 45%,transparent);color:#fff;font-size:18px;font-weight:700}
.gallery{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.gallery img{width:100%;height:auto;border-radius:10px;border:1px solid var(--line);display:block;background:var(--veil)}
.gallery video,.media video{width:100%;border-radius:10px;border:1px solid var(--line);background:#000;display:block}

/* sensitive images: blurred until tapped, words stay readable */
.spoiler{position:relative;border-radius:10px;overflow:hidden;margin-top:10px}
.spoiler > .media,.spoiler > .gallery{margin-top:0}
.spoiler.veiled > .media,.spoiler.veiled > .gallery{filter:blur(18px);pointer-events:none;user-select:none}
.spoiler .cover{position:absolute;inset:0;display:grid;place-items:center;background:color-mix(in srgb,var(--veil) 55%,transparent);border:0;cursor:pointer;width:100%;z-index:1}
.spoiler .cover span{padding:8px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:13px;color:var(--ink)}
.spoiler:not(.veiled) .cover{display:none}
.no-js .spoiler.veiled > .media,.no-js .spoiler.veiled > .gallery{filter:blur(18px)}

/* single post */
.thread{display:grid;grid-template-columns:40px 1fr;gap:0 12px;padding-block:14px}
.thread .rail{display:flex;flex-direction:column;align-items:center}
.thread .rail::after{content:"";flex:1;width:2px;background:var(--line);margin-top:6px}
.thread.last .rail::after{display:none}
.single h1.post-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.section-h{margin:26px 0 4px;font-size:13px;letter-spacing:.08em;color:var(--muted);font-weight:500}
.orig{margin-top:18px;padding:12px 14px;border-radius:10px;background:var(--card);border:1px solid var(--line);font-size:13px;color:var(--muted);word-break:break-all}
.pager{display:flex;justify-content:space-between;gap:12px;margin-top:24px;font-size:14px}
.pager a{max-width:48%;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pages{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:24px;font-size:14px;font-variant-numeric:tabular-nums}
.pages a,.pages span{min-width:36px;text-align:center;padding:6px 10px;border-radius:999px;border:1px solid var(--line);text-decoration:none}
.pages span[aria-current]{background:var(--accent);border-color:var(--accent);color:var(--paper)}

/* month index */
.months{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-top:14px}
.months a{display:flex;justify-content:space-between;padding:10px 12px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink);background:var(--card)}
.months a span{color:var(--muted);font-variant-numeric:tabular-nums}
.year-h{margin:24px 0 0;font-family:var(--serif);font-size:18px}

/* search */
.search{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.search input{flex:1 1 220px;min-width:0;padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit}
.search select{padding:8px 10px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit}
.result{color:var(--muted);font-size:13px;margin-top:10px;font-variant-numeric:tabular-nums}
.empty{padding:40px 0;text-align:center;color:var(--muted)}
.loadmore{margin:20px auto 0;display:block;padding:10px 22px;border-radius:999px;border:1px solid var(--line);background:var(--card);cursor:pointer}

.footer{margin-top:40px;font-size:12.5px;color:var(--muted);line-height:1.7;border-top:1px solid var(--line);padding-top:14px}
@media (prefers-reduced-motion:no-preference){.spoiler > .media,.spoiler > .gallery{transition:filter .25s}}
@media (max-width:420px){.brand small{display:none}}

/* 單篇頁多張圖：左右滑動輪播（同高、依比例變寬，像 Threads） */
.carousel{--h:clamp(200px,min(60vw,48vh),380px);position:relative;display:block}
.carousel .track{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-radius:10px}
.carousel .track::-webkit-scrollbar{display:none}
.carousel .slide{flex:0 0 auto;scroll-snap-align:start;height:var(--h);max-width:88%}
.carousel .slide a{display:block;height:100%}
.carousel .slide img{height:100%;width:auto;max-width:100%;object-fit:cover}
.carousel .slide video{height:100%;width:auto;aspect-ratio:3/4}
.carousel .cnav{position:absolute;top:calc(var(--h) / 2);transform:translateY(-50%);width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:color-mix(in srgb,var(--paper) 88%,transparent);color:var(--ink);font-size:22px;line-height:1;
  cursor:pointer;display:none;place-items:center;padding:0 0 3px;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.carousel .prev{left:8px}.carousel .next{right:8px}
.carousel .cnav[disabled]{opacity:0;pointer-events:none}
.carousel .ccount{position:absolute;top:8px;right:8px;padding:2px 9px;border-radius:999px;font-size:12px;
  background:color-mix(in srgb,var(--ink) 60%,transparent);color:#fff;pointer-events:none}
@media (hover:hover) and (pointer:fine){.carousel .cnav{display:grid}}
.spoiler.veiled .carousel .cnav,.spoiler.veiled .carousel .ccount{display:none}

/* 圖片蓋版檢視（像 Threads）：左右切換、叉叉關閉 */
.lb{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.94);display:none}
.lb.open{display:block}
.lb .lbtrack{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior:contain}
.lb .lbtrack::-webkit-scrollbar{display:none}
.lb .lbslide{flex:0 0 100%;height:100%;scroll-snap-align:center;display:grid;place-items:center}
.lb .lbslide img{max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);width:auto;height:auto;object-fit:contain;display:block;cursor:zoom-in}
.lb .lbslide.zoom{overflow-y:auto;place-items:start center;padding:16px 0}
.lb .lbslide.zoom img{max-height:none;max-width:min(calc(100vw - 32px),1000px);cursor:zoom-out}
.lb button{position:absolute;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;font-size:26px;line-height:1;display:grid;place-items:center;padding:0}
.lb button:hover{background:rgba(255,255,255,.22)}
.lb .lbclose{top:16px;left:16px;font-size:22px}
.lb .lbprev{left:16px;top:50%;transform:translateY(-50%)}
.lb .lbnext{right:16px;top:50%;transform:translateY(-50%)}
.lb button[disabled]{opacity:0;pointer-events:none}
.lb .lbcount{position:absolute;top:26px;left:50%;transform:translateX(-50%);color:#fff;font-size:13px;opacity:.85}
@media (hover:none){.lb .lbprev,.lb .lbnext{display:none}}
html.lb-lock,html.lb-lock body{overflow:hidden}

/* 單篇頁「返回」 */
.back{display:inline-flex;align-items:center;gap:4px;margin-top:14px;padding:6px 14px 6px 10px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:14px;text-decoration:none}
.back:hover{border-color:var(--accent);color:var(--accent)}
.back + .crumbs{margin-top:10px}
.carousel.fits .ccount,.carousel.fits .cnav{display:none}
/* fit-viewport */
.gallery:not(.carousel) img{width:auto;max-width:100%;max-height:min(68vh,560px);object-fit:contain}
.gallery:not(.carousel) video{width:auto;max-width:100%;max-height:min(68vh,560px)}