/* handygor.com — one centered column, a turning miniature, a caption, a poem.
   Layout, scale and colour after pengzhe.ng; system fonts only. */
:root{
  color-scheme: light dark;
  --color-text:#1a1a1a; --color-secondary:#8a8a8a; --color-faint:#b3b3b3; --color-border:#ececec; --color-bg:#fff;
  --color-pill-ink:#404040; --color-pill-ink-hover:#0a0a0a;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial,
               "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC",
               "Microsoft YaHei", sans-serif;
  --pill-font-size:1.125rem; --pill-line-height:calc(var(--pill-font-size) * 1.4);
  --pill-pad-y:.375rem; --pill-pad-x:.875rem; --pill-pad-inner:.75rem; --split-radius:.25rem;
  --pill-glass:40%; --pill-blur:blur(10px) saturate(1.6) contrast(.388) brightness(1.44);
  --pill-fill:color-mix(in srgb, var(--color-border) var(--pill-glass), transparent);
  --pill-fill-pressed:color-mix(in srgb, color-mix(in srgb, var(--color-border), var(--color-text) 10%) var(--pill-glass), transparent);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme=light]){
    --color-text:#f2f2f2; --color-secondary:#9a9a9a; --color-faint:#6b6b6b; --color-border:#2a2a2a; --color-bg:#111;
    --color-pill-ink:#bdbdbd; --color-pill-ink-hover:#f2f2f2; --pill-glass:58%; --pill-blur:blur(10px) saturate(1.4);
  }
}
:root[data-theme=dark]{
  color-scheme:dark;
  --color-text:#f2f2f2; --color-secondary:#9a9a9a; --color-faint:#6b6b6b; --color-border:#2a2a2a; --color-bg:#111;
  --color-pill-ink:#bdbdbd; --color-pill-ink-hover:#f2f2f2; --pill-glass:58%; --pill-blur:blur(10px) saturate(1.4);
}
:root[data-theme=light]{ color-scheme:light }
@media (width<=40rem) and (hover:none) and (pointer:coarse){
  :root{ --pill-font-size:1.25rem; --pill-pad-y:.5rem; --pill-pad-x:1.125rem; --pill-pad-inner:.875rem }
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent }
html, body{ touch-action:pan-y pinch-zoom; overscroll-behavior-x:none; overflow-x:clip }
body{
  font-family:var(--font-sans); color:var(--color-text); background:var(--color-bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-wrap:pretty;
  font-size:15px; font-weight:500; line-height:1.6;
}
html[lang="zh-CN"] body{ text-autospace:normal }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
:focus-visible{ outline:2px solid var(--color-secondary); outline-offset:3px; border-radius:6px }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }

/* language: no-JS shows Chinese */
html[data-lang="zh"] .en, html:not([data-lang]) .en{ display:none !important }
html[data-lang="en"] .zh{ display:none !important }

.page{ max-width:34rem; margin:0 auto; padding:5rem 1.5rem 6rem }
@media (width<=40rem){ .page{ padding-top:calc(6.5rem + env(safe-area-inset-top, 0px)) } }

/* the object */
.hero{ position:relative }
.hero-box{ display:block; position:relative; width:min(22.5rem, 100%, 78vw); margin-inline:auto; cursor:zoom-in; outline-offset:6px }
.hero-art{ display:block; position:relative }
.hero-pose{ display:block; width:100%; height:auto; aspect-ratio:1; -webkit-user-drag:none; user-select:none; transition:opacity .3s }
.hero-model{ position:absolute; inset:-6% max(-25%, calc(50% - 50vw)); opacity:0; pointer-events:none; transition:opacity .3s; cursor:grab }
.hero-model:active{ cursor:grabbing }
.hero-model model-viewer{ display:block; width:100%; height:100%; background:transparent;
  --poster-color:transparent; --progress-bar-color:transparent }
.hero-box[data-model-active=true] .hero-model{ opacity:1; pointer-events:auto }
.hero-box[data-model-active=true] .hero-pose{ opacity:0 }
.ph{ opacity:.5 }
:root[data-theme=dark] .ph{ filter:invert(1) }
@media (prefers-color-scheme: dark){ :root:not([data-theme=light]) .ph{ filter:invert(1) } }
.ph-empty{ display:block; aspect-ratio:1 }

/* caption + "last seen" */
.caption{ color:var(--color-text); letter-spacing:-.015em; text-align:center; margin-top:1.25rem;
  font-size:1.5rem; font-weight:500; line-height:1.5; transition:opacity .25s }
.caption:lang(zh-CN){ letter-spacing:normal; line-height:1.6 }
.muted{ color:var(--color-secondary) }
a.muted{ transition:color .15s }
@media (hover:hover) and (pointer:fine){ a.muted:hover{ color:var(--color-text) } }
.hug{ white-space:nowrap }

/* the poem, a footnote set like a list section */
.section{ margin-top:4.5rem }
.entry-meta{ text-align:center; margin-top:1.25rem; font-size:1.25rem; line-height:1.4 }
.entry-meta + .entry-meta{ margin-top:0 }
.entry-meta a{ color:inherit; text-decoration:none }
.entry-meta a:hover{ color:var(--color-secondary) }
.entry-meta + .entry-meta + .caption, .entry-meta + .entry-meta + .caption + .caption{ margin-top:.5rem }
.about{ margin-top:6rem; padding-top:2rem; border-top:1px solid var(--color-border) }
.about .label{ font-size:1rem }
.about-text{ color:var(--color-secondary); font-size:1rem; line-height:1.75; text-align:center; text-wrap:pretty; max-width:30rem; margin-inline:auto }
.about-text:lang(zh-CN){ line-height:1.85 }
.label{ color:var(--color-faint); text-align:center; margin-bottom:.75rem; font-size:1.25rem; font-weight:500 }
.label .fn{ margin-right:.2em }
.poem-lines{ text-align:center; font-size:1.25rem; line-height:1.2 }
.poem-lines .line{ display:block; padding-block:.375rem }
.poem-lines.en{ color:var(--color-secondary) }

/* timeline strip (full screen) */
.strip-wrap{ position:fixed; inset:0; z-index:10; background:var(--color-bg); opacity:0; pointer-events:none;
  display:flex; flex-direction:column; justify-content:center; transition:opacity .25s }
[data-expanded=true] .strip-wrap{ opacity:1; pointer-events:auto; transition:opacity .15s }
[data-expanded=true] .stage{ opacity:0; pointer-events:none }
.stage{ transition:opacity .25s }
.strip-year{ text-align:center; color:var(--color-faint); font-size:1.25rem; font-variant-numeric:tabular-nums; margin-bottom:1rem }
.strip{ list-style:none; display:flex; gap:2rem; overflow:auto hidden; scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain; scrollbar-width:none; padding:.5rem max(3rem, calc(50vw - 7.5rem)) }
.strip::-webkit-scrollbar{ display:none }
.strip-item{ --slot:15rem; flex:0 0 var(--slot); width:var(--slot); text-align:center; scroll-snap-align:center }
.strip-link{ display:block; cursor:pointer; user-select:none }
.strip-when{ display:block; color:var(--color-secondary); font-size:1.25rem; margin-bottom:.75rem; font-variant-numeric:tabular-nums }
.strip-art{ display:block }
.strip-art img, .strip-art .ph-empty{ display:block; width:100%; height:auto; aspect-ratio:1; -webkit-user-drag:none }
.strip-art img{ transition:transform .35s cubic-bezier(.2,.7,.2,1) }
.strip-place{ display:block; margin-top:.625rem; font-size:1.25rem; font-weight:500; letter-spacing:-.01em; transition:color .15s }
.strip-kind{ display:block; color:var(--color-secondary); font-size:1.25rem }
.strip-link[aria-current=page] .strip-when{ color:var(--color-text) }
@media (hover:hover) and (pointer:fine){
  .strip-link:hover .strip-place{ color:var(--color-secondary) }
  .strip-link:hover .strip-art img{ transform:scale(1.03) }
}
@media (width<=40rem) and (height<=38.75rem){ .strip-item{ --slot:clamp(7.5rem, (100svh - 19rem) / 1.15, 15rem) } }

/* chrome: pills */
.pill, .pill-split > *{ background:var(--pill-fill); -webkit-backdrop-filter:var(--pill-blur); backdrop-filter:var(--pill-blur) }
.pill{ border-radius:999px }
.pill-split{ display:flex; gap:3px }
.pill-split > :first-child{ border-radius:999px var(--split-radius) var(--split-radius) 999px }
.pill-split > :last-child{ border-radius:var(--split-radius) 999px 999px var(--split-radius) }
.pill:active, .pill-split > :active{ background:var(--pill-fill-pressed) }
.view-all, .theme-toggle, .lang-toggle{
  color:var(--color-pill-ink); font-size:var(--pill-font-size); line-height:var(--pill-line-height);
  white-space:nowrap; transition:color .2s, background-color .35s;
}
.view-all{ padding:var(--pill-pad-y) var(--pill-pad-x) }
.theme-toggle{ padding:var(--pill-pad-y) var(--pill-pad-inner) var(--pill-pad-y) var(--pill-pad-x) }
.lang-toggle{ padding:var(--pill-pad-y) var(--pill-pad-x) var(--pill-pad-y) var(--pill-pad-inner) }
@media (hover:hover){ .view-all:hover, .theme-toggle:hover, .lang-toggle:hover{ color:var(--color-pill-ink-hover) } }
.to-light{ display:none }
:root[data-theme=dark] .to-dark{ display:none } :root[data-theme=dark] .to-light{ display:inline }
@media (prefers-color-scheme: dark){
  :root:not([data-theme=light]) .to-dark{ display:none } :root:not([data-theme=light]) .to-light{ display:inline }
}
.timeline-controls, .settings-dock{ position:fixed; z-index:26; bottom:1.625rem; display:flex; align-items:center; gap:.5rem; pointer-events:none }
.timeline-controls > *, .settings-dock > *{ pointer-events:auto }
.timeline-controls{ left:calc(1.5rem + env(safe-area-inset-left, 0px)) }
.settings-dock{ right:calc(1.5rem + env(safe-area-inset-right, 0px)) }
@media (width<=40rem){
  .timeline-controls, .settings-dock{ top:calc(1.25rem + env(safe-area-inset-top, 0px)); bottom:auto }
}

/* quiet entrance + theme / language crossfade */
@keyframes appear{ from{ opacity:0 } to{ opacity:1 } }
.stage, .poem, .about{ animation:appear .6s ease both }
.about{ animation-delay:.2s }
.poem{ animation-delay:.12s }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.35s; animation-timing-function:ease }
:root.theme-transition, :root.theme-transition *{ transition:background-color .35s, color .35s !important }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important } }