/* Watch-site additions on top of Garden's CSS (garden.css stays an untouched copy). */

/* Header: one link, visible on every width (Garden hides its main nav on phones and uses a bottom bar; we have only one link). */
.watch-nav{display:flex;align-items:center;margin-left:auto;margin-right:clamp(14px,2.5vw,28px)}
.watch-nav a{position:relative;padding:8px 0;letter-spacing:var(--tracking-ui,.085em);font-size:11px;font-weight:var(--weight-ui-emphasis);white-space:nowrap;color:inherit;text-decoration:none}
html[lang="zh-Hant"] .watch-nav a{font-size:13px;letter-spacing:.06em}
.watch-nav a:hover,.watch-nav a[aria-current="page"]{color:#a96876}
.watch-nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--pink)}
.site-header .wordmark{color:inherit;text-decoration:none}

/* Story callout (owner 2026-10-30): the 7th-anniversary block stands out — soft rose panel inside the story. */
.story-callout{margin:22px 0 4px;padding:20px 22px 18px;border-radius:16px;background:color-mix(in srgb,var(--pink) 14%,var(--paper));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pink) 32%,transparent)}
.story-callout p{margin:0;max-width:40em;color:var(--ink);font:400 17px/1.75 var(--font-body);white-space:pre-wrap}
.story-callout p+p{margin-top:.6em}
.story-callout strong{color:var(--berry)}
.story-callout a{word-break:break-all}
@media(max-width:760px){.story-callout{padding:16px 16px 14px;border-radius:14px}.story-callout p{font-size:16px}}

/* Find TKKT — ported from Garden's find-tkkt.module.css (2026-10-30), class names prefixed find-. */
.find-page{width:min(90%,680px);margin:0 auto;padding:40px 0 72px;overflow-x:clip}
.find-text,.find-name,.find-focus,.find-meta{overflow-wrap:anywhere}
.find-header{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.find-header h1{margin:0;font:var(--weight-display) clamp(36px,8vw,56px)/var(--leading-headline) var(--font-display);letter-spacing:var(--tracking-headline)}
.find-header p{margin:0;max-width:34em;color:var(--ink);opacity:.78;font:400 17px/1.55 var(--font-body)}
.find-header .find-start{font-size:15px;opacity:.86}
.find-start a{color:var(--pink);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--pink) 45%,transparent)}
.find-start a:hover{border-bottom-color:var(--pink)}
.find-start-mark{display:inline-block;width:.85em;height:.85em;margin-right:.3em;vertical-align:-.08em;fill:currentColor}
.find-group{margin-top:40px}
.find-group h2{margin:0 0 6px;color:var(--ink);font:var(--weight-display) 24px/1.3 var(--font-display);letter-spacing:var(--tracking-headline)}
.find-group-note{margin:-2px 0 8px;color:var(--muted);font:400 14px/1.5 var(--font-body)}
.find-accounts{list-style:none;margin:0;padding:0}
.find-accounts>li+li{border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.find-row{display:grid;grid-template-columns:24px minmax(0,1fr) 20px;gap:16px;align-items:start;padding:14px 0;color:var(--ink);text-decoration:none}
.find-row:focus-visible{outline:2px solid var(--pink);outline-offset:4px;border-radius:4px}
.find-tile{display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-top:-1px;border-radius:6px;background:#000}
.find-tile svg{width:14px;height:14px;display:block}
.find-tile svg[data-wide]{width:18px;height:12px}
.find-tile[data-brand="instagram"]{background:linear-gradient(45deg,#f9ce34,#ee2a7b 55%,#6228d7)}
.find-tile[data-brand="onlyfans"]{background:#00AFF0}
.find-tile[data-brand="weibo"],.find-tile[data-brand="fansone"]{background:#fff;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 10%,transparent)}
.find-tile[data-brand="xhamster"]{background:#4c4c4e}
.find-tile img{display:block;width:20px;height:20px;border-radius:4px}
.find-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.find-name{display:flex;flex-wrap:nowrap;align-items:center;gap:2px 8px;font:600 16px/22px var(--font-body)}
.find-who{display:block;white-space:nowrap;font:400 13px/18px var(--font-body);color:var(--muted)}
.find-handle{color:var(--muted);font-weight:400}
.find-main{color:var(--berry);font-weight:500}
.find-focus{color:var(--ink);opacity:.86;font:400 15px/1.55 var(--font-body);text-wrap:pretty}
.find-meta{color:var(--muted);font:400 14px/1.45 var(--font-body)}
.find-meta>span>*{white-space:nowrap}
.find-arrow{justify-self:end;color:var(--muted);font-size:15px;line-height:22px;transition:color .15s,transform .15s}
.find-row:hover .find-arrow{color:var(--ink);transform:translate(2px,-2px)}
.find-row:hover .find-name{color:var(--pink)}
.find-backup{border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.find-award{display:inline-flex;align-items:center;gap:3px;color:#a8873f}
.find-award svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.find-count{margin-left:8px;color:var(--muted);font:400 13px/18px var(--font-body);font-variant-numeric:tabular-nums}
.find-count::before{content:"· ";margin-right:2px}
.find-sub-chip{align-self:center;display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:999px;background:color-mix(in srgb,#993556 12%,transparent);color:#993556;font:500 11px/1 var(--font-body);white-space:nowrap}
.find-header h1,.find-group h2{font-family:var(--font-newsreader-face),"Songti TC","Noto Serif TC",serif;font-weight:var(--weight-display)}
html[lang="en"] .find-header h1,html[lang="en"] .find-group h2{font-family:var(--font-brand);font-weight:400;letter-spacing:.04em}
html[lang="zh-Hant"] .find-header h1,html[lang="zh-Hant"] .find-group h2{font-weight:600}
.site-shell:has([data-find-page]) .site-footer{display:none} /* Garden: no footer here, it would list the same accounts twice */
@media(prefers-reduced-motion:reduce){.find-arrow{transition:none}}
@media(min-width:761px){.find-page{padding:64px 0 96px}.find-group{margin-top:48px}.find-row{padding:18px 0;gap:20px}}

/* Header "Subscribe" like Garden's (berry text), a gap between the two links. */
.watch-nav{gap:clamp(16px,2.5vw,32px)}
.watch-nav a.watch-nav-subscribe{color:#935a69}
.watch-nav a.watch-nav-subscribe:hover{color:#7c4a58}
/* Subscribe guide: Garden lifts the phone "choose a plan" bar above its bottom nav; this site has no bottom nav. */
@media(max-width:760px){.sg .mobile-cta{bottom:env(safe-area-inset-bottom)}}

/* Watch uses Garden dark appearance throughout. */
html[data-appearance="dark"] .watch-nav a.watch-nav-subscribe{color:var(--pink)}
html[data-appearance="dark"] .find-sub-chip{color:var(--pink);background:color-mix(in srgb,var(--pink) 12%,transparent)}

.story-title{font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif!important;font-weight:700!important;font-size:21px!important;line-height:1.5!important;color:var(--berry)!important;margin-top:1em!important;letter-spacing:.02em}
.story-callout .story-title:first-child{margin-top:0!important}

/* Episode cards: a calm index before the existing story / password page. */
.watch-home{width:min(90%,1120px);margin:0 auto;padding:48px 0 88px}
.watch-home h1{margin:0 0 24px;color:var(--ink);font:600 clamp(23px,3vw,30px)/1.3 -apple-system,BlinkMacSystemFont,"PingFang TC",sans-serif;letter-spacing:.04em}
.watch-episode-list{list-style:none;display:grid;gap:24px;margin:0;padding:0}
.watch-episode-card{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:stretch;overflow:hidden;border:1px solid color-mix(in srgb,var(--pink) 24%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--pink) 4%,var(--paper));color:var(--ink);text-decoration:none;transition:border-color .2s,box-shadow .2s}
.watch-episode-card:hover{border-color:color-mix(in srgb,var(--pink) 65%,var(--line));box-shadow:0 12px 32px #0002}
.watch-episode-card:focus-visible{outline:3px solid var(--pink);outline-offset:5px}
.watch-episode-cover{align-self:center;aspect-ratio:16/9;overflow:hidden;background:var(--paper)}
.watch-episode-cover img{display:block;width:100%;height:100%;object-fit:contain}
.watch-episode-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;padding:clamp(24px,3vw,40px)}
.watch-episode-meta{display:flex;flex-wrap:wrap;align-items:center;gap:5px 9px;margin:0 0 16px;color:var(--muted);font:400 13px/1.6 var(--font-body);letter-spacing:.03em}
.watch-episode-code{color:var(--pink);font-weight:600;font-variant-numeric:tabular-nums}
.watch-episode-copy h2{margin:0;overflow-wrap:anywhere;text-wrap:pretty;font:600 clamp(22px,2.2vw,30px)/1.45 -apple-system,BlinkMacSystemFont,"PingFang TC",sans-serif;letter-spacing:.01em}
.watch-episode-cta{display:inline-flex;align-items:center;gap:18px;margin-top:26px;color:var(--pink);font:500 14px/1.5 var(--font-body)}
.watch-episode-cta>span{transition:transform .2s}
.watch-episode-card:hover .watch-episode-cta>span{transform:translateX(4px)}
@media(max-width:760px){.watch-home{padding:30px 0 56px}.watch-home h1{margin-bottom:20px}.watch-episode-card{grid-template-columns:minmax(0,1fr);border-radius:12px}.watch-episode-copy{padding:22px 22px 24px}.watch-episode-meta{margin-bottom:10px}.watch-episode-copy h2{font-size:22px;line-height:1.5}.watch-episode-cta{margin-top:20px}}
@media(prefers-reduced-motion:reduce){.watch-episode-card,.watch-episode-cta>span{transition:none}.watch-episode-card:hover .watch-episode-cta>span{transform:none}}

/* On narrow phones keep all three navigation links and the language switch visible. */
@media(max-width:360px){
  .site-header{height:auto}
  .site-header .header-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding-block:12px}
  .site-header .header-inner>.wordmark{grid-column:1;grid-row:1}
  .site-header .header-inner>.watch-nav{grid-column:1/-1;grid-row:2;justify-content:center;margin:0;gap:24px}
  .site-header .header-inner>.HeaderSubscription-module__DbYwVq__tools{grid-column:2;grid-row:1}
}

.watch-events-site{height:100vh;height:100dvh;min-height:0;display:flex;flex-direction:column;padding-bottom:0}
.watch-events-site .site-header{flex-shrink:0}
.watch-events-site #main-content{flex:1;min-height:0;display:flex}
.watch-events-site .site-footer{display:none}
.watch-events-shell{position:relative;width:100%;height:100%;background:var(--paper)}
.watch-events-frame{display:block;width:100%;height:100%;border:0;opacity:0}
.events-ready .watch-events-frame{opacity:1}
.watch-events-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;color:var(--muted);text-align:center}
.events-ready .watch-events-loading{display:none}
.watch-events-fallback{display:none;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center}
.events-slow .watch-events-fallback{display:flex}
.watch-events-fallback a{color:var(--pink)}
.watch-events-fallback button{font:inherit;padding:8px 16px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:var(--white);cursor:pointer}

/* Password dialog (2026-10-31): heading → one-line hint → password → Watch; where to get it and how to subscribe sit below, quieter. */
.sw-hint{margin:6px 0 18px;color:color-mix(in srgb,var(--ink) 62%,transparent);font-size:15px;line-height:1.5}
.sw-foot{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:18px;font-size:14px;color:color-mix(in srgb,var(--ink) 62%,transparent)}
.sw-post{display:inline-flex;align-items:center;gap:6px;color:var(--berry);font-weight:600;text-decoration:none}
.sw-post svg{width:18px;height:18px}
.sw-post:hover{text-decoration:underline}
.sw-sub a{color:var(--berry);text-decoration:underline;text-underline-offset:3px}