/* Zongyuan — tokens copied verbatim from DESIGN.md. Do not invent values here. */
:root {
  --color-paper:#FAF6EF; --color-paper-raised:#FFFDF8; --color-paper-sunk:#F3EDE3;
  --color-ink:#2A2723; --color-ink-muted:#6E675E; --color-ink-faint:#A39A8C;
  --color-rule:#E4DACB;
  --color-cinnabar:#C9352C; --color-cinnabar-deep:#A62B22; --color-cinnabar-wash:#F7E4E0;
  --color-gilt:#C99A3C;
  --color-celadon:#9FC7B0; --color-lilac:#C8C2DC; --color-blush:#F0C6C6;
  --color-celadon-wash:#E8F0EA; --color-lilac-wash:#EDEAF4; --color-blush-wash:#FBECEC;
  --gradient-sky:linear-gradient(160deg,rgba(240,198,198,.34) 0%,rgba(200,194,220,.26) 34%,
                 rgba(159,199,176,.20) 68%,rgba(250,246,239,0) 100%);
  --font-display:"Newsreader","Noto Serif SC",Georgia,serif;
  --font-body:"IBM Plex Sans","IBM Plex Sans SC",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --font-brush:"LXGW WenKai","Kaiti SC",cursive;
  --text-display:40px; --leading-display:1.25;
  --text-h2:26px; --leading-h2:1.35;
  --text-h3:19px; --leading-h3:1.45;
  --text-read:17px; --leading-read:1.7;
  --text-body:15px; --leading-body:1.6;
  --text-meta:13px; --leading-meta:1.55;
  --text-micro:11px; --leading-micro:1.4;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
  --radius-seal:2px; --radius-control:5px; --radius-bubble:12px; --radius-surface:12px;
  --radius-full:9999px;
  --shadow-float:0 1px 2px rgba(42,39,35,.05),0 14px 36px -16px rgba(42,39,35,.16);
  --scrim-lightbox:rgba(42,39,35,.92); --scrim-dialog:rgba(42,39,35,.32);
  --ease:cubic-bezier(.2,.8,.2,1); --duration:200ms;
  --width-shell:1240px; --width-rail:340px; --width-column:720px;
  --measure-en:66ch; --measure-zh:34em;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--color-paper);color:var(--color-ink);
  font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased}
a{color:var(--color-cinnabar-deep);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button{font:inherit}
:focus-visible{outline:2px solid var(--color-cinnabar);outline-offset:2px}
img{max-width:100%}
h1,h2,h3{font-family:var(--font-display);font-weight:400;margin:0}
@keyframes sealIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{
  animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---- shell: permanent two-column, rail never moves ---- */
.shell{display:flex;justify-content:center;min-height:100vh}
.shell-inner{width:100%;max-width:var(--width-shell);padding:0 40px;display:flex;
  align-items:flex-start}
/* A sidebar taller than the viewport cannot be pinned at top:0 — its foot only
   appears once the page itself has been scrolled to the end. It gets its own scroll
   instead, so the whole rail is reachable from any position in the stream. The
   scrollbar is thin and only paints on hover. */
.rail{width:var(--width-rail);flex:0 0 var(--width-rail);position:sticky;top:0;
  height:100vh;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  border-right:1px solid var(--color-rule);
  padding-right:var(--space-6);display:flex;flex-direction:column;
  scrollbar-width:thin;scrollbar-color:transparent transparent}
.rail:hover{scrollbar-color:var(--color-rule) transparent}
.rail::-webkit-scrollbar{width:6px}
.rail::-webkit-scrollbar-thumb{background:transparent;border-radius:var(--radius-full)}
.rail:hover::-webkit-scrollbar-thumb{background:var(--color-rule)}
.rail-portrait{position:relative;margin:0 calc(var(--space-6)*-1) 0 -40px}
/* Full-bleed portrait is the design's opening note, but at its native ratio it alone
   is most of a viewport. Cropped to a band it keeps the gesture and frees the rail. */
.rail-portrait img{display:block;width:100%;height:clamp(200px,26vh,280px);
  object-fit:cover;object-position:center 18%}
.rail-portrait::before{content:"";position:absolute;inset:0;background:var(--gradient-sky);
  pointer-events:none}
.rail-portrait::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:46%;
  background:linear-gradient(to bottom,rgba(250,246,239,0) 0%,rgba(250,246,239,.72) 58%,
  var(--color-paper) 100%);pointer-events:none}
.seal{width:40px;height:40px;border-radius:var(--radius-seal);background:var(--color-cinnabar);
  color:var(--color-paper);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-brush);font-size:24px;line-height:1;
  animation:sealIn 180ms var(--ease) both}
.rail-name{font-family:var(--font-display);font-weight:400;
  font-size:var(--text-h2);line-height:var(--leading-h2);margin-top:var(--space-4)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rail-zh{margin-top:2px;font-family:var(--font-brush);font-size:var(--text-read);
  color:var(--color-ink-muted)}
.rail-aphorism{margin:var(--space-3) 0 0;font-family:var(--font-brush);
  font-size:var(--text-read);line-height:var(--leading-body);color:var(--color-ink)}
.rail-bio{margin-top:var(--space-7);display:flex;flex-direction:column;gap:var(--space-3)}
.rail-bio p{margin:0}
.rail-section{margin-top:var(--space-7)}
.rail-section h2{font-size:var(--text-h2);line-height:var(--leading-h2);
  margin-bottom:var(--space-3)}
.rail-list{border-top:1px solid var(--color-rule)}
.rail-list a,.rail-list div{display:block;padding:var(--space-3) 0;
  border-bottom:1px solid var(--color-rule);color:var(--color-ink)}
.rail-nav{margin-top:var(--space-7);display:flex;flex-direction:column;gap:2px}
.rail-nav a{position:relative;padding:6px 0 6px var(--space-3);color:var(--color-ink-muted)}
.rail-nav a.is-active{color:var(--color-ink)}
.rail-nav a.is-active::before{content:"";position:absolute;left:0;top:6px;bottom:6px;
  width:2px;background:var(--color-cinnabar)}
.rail-contact{margin-top:var(--space-7);font-size:var(--text-meta);
  line-height:var(--leading-meta);color:var(--color-ink-muted);
  display:flex;flex-direction:column;gap:var(--space-1)}
.meander{margin-top:var(--space-7);padding-bottom:var(--space-7)}

.column{flex:1 1 auto;min-width:0;max-width:var(--width-column);
  padding:var(--space-6) 0 var(--space-10) 40px}

/* ---- stream ---- */
.month-head{display:flex;align-items:baseline;gap:var(--space-4);
  margin:var(--space-7) 0 var(--space-4)}
.month-head:first-child{margin-top:0}
.month-head h2{font-size:var(--text-h2);line-height:var(--leading-h2);white-space:nowrap}
.month-head .rule{flex:1 1 auto;height:1px;background:var(--color-rule)}
.spine{border-left:1px solid var(--color-rule);padding-left:var(--space-6);
  display:flex;flex-direction:column;gap:2px}
.post{position:relative;display:flex;gap:var(--space-5);align-items:flex-start;
  padding:var(--space-4) 0;border-bottom:1px solid var(--color-rule)}
.post:last-child{border-bottom:0}
.post:hover{background:var(--color-paper-raised)}
.post-body{flex:1 1 auto;min-width:0}
.post .dot{position:absolute;left:-35px;top:22px;width:5px;height:5px;
  background:var(--color-cinnabar)}
.post .headline{display:flex;align-items:baseline;gap:var(--space-2);flex-wrap:wrap}
.tag{display:inline-block;padding:3px var(--space-2);border-radius:var(--radius-seal);
  font-size:var(--text-meta);line-height:var(--leading-meta)}
.tag-year{background:var(--color-lilac-wash);color:#514B77}
.tag-work{background:var(--color-lilac-wash);color:#514B77}
.tag-health{background:var(--color-celadon-wash);color:#3F6B52}
.tag-travel{background:var(--color-celadon-wash);color:#3F6B52}
.tag-home{background:var(--color-blush-wash);color:#8A4A4A}
.post h3{font-size:var(--text-h3);line-height:var(--leading-h3)}
.post h3 a{color:var(--color-ink)}
.post .excerpt{margin:var(--space-2) 0 0;font-size:var(--text-body);
  line-height:var(--leading-body);color:var(--color-ink-muted);max-width:var(--measure-en);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post .meta{margin-top:var(--space-2)}
/* Fixed footprint whatever the post holds, so the stream keeps an even rhythm.
   One screenshot fills the square; two split it; three or more make the 2x2. */
.shots{flex:0 0 150px;width:150px;height:150px;display:grid;gap:3px;
  grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}
.shots[data-n="1"]{grid-template-columns:1fr;grid-template-rows:1fr}
.shots[data-n="2"]{grid-template-rows:1fr}
.shots .cell{position:relative;border-radius:6px;overflow:hidden;
  background:var(--color-paper-sunk);display:block;min-width:0;min-height:0}
.shots .cell::after{content:"";position:absolute;inset:0;
  background:var(--color-paper);opacity:.10;mix-blend-mode:hard-light;pointer-events:none}
.shots .cell{box-shadow:inset 0 0 0 1px rgba(42,39,35,.09)}
.shots img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;
  filter:saturate(.86) contrast(.96)}
.shots .more{position:absolute;inset:0;background:rgba(42,39,35,.5);color:var(--color-paper);
  display:flex;align-items:center;justify-content:center;font-size:var(--text-meta)}

/* detail page keeps the plate large — there the screenshot is the record itself */
.grid{margin-top:var(--space-4);display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.grid img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;
  filter:saturate(.9)}
.grid .cell{position:relative;aspect-ratio:1/1;border-radius:var(--radius-surface);
  overflow:hidden;background:var(--color-paper-sunk);border:0;padding:0;
  box-shadow:inset 0 0 0 1px rgba(42,39,35,.08)}
.grid .more{position:absolute;inset:0;background:rgba(42,39,35,.55);color:var(--color-paper);
  display:flex;align-items:center;justify-content:center;font-size:var(--text-micro)}
.meta{margin-top:var(--space-4);display:flex;align-items:center;gap:var(--space-2);
  font-size:var(--text-meta);line-height:var(--leading-meta);color:var(--color-ink-muted);
  flex-wrap:wrap}
.meta .bar{width:1px;height:12px;background:var(--color-rule);display:block}
.meta .seal-dot{width:12px;height:12px;border-radius:var(--radius-seal);
  background:var(--color-cinnabar);display:block;margin-left:var(--space-1)}
.chip-ai{padding:2px var(--space-2);border:1px solid var(--color-gilt);
  border-radius:var(--radius-seal);color:var(--color-ink)}
.pinned-head{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-4)}
.pinned-head .mark{width:12px;height:12px;border:1px solid var(--color-gilt);
  border-radius:var(--radius-seal);display:block}
.pinned-rail{display:flex;gap:var(--space-5);overflow-x:auto;padding-bottom:var(--space-2)}
.pinned-card{flex:0 0 200px;color:var(--color-ink)}
.pinned-card .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  background:var(--color-paper-sunk);padding:2px;border-radius:var(--radius-surface)}
.pinned-card .tiles div{aspect-ratio:1/1;overflow:hidden;background:var(--color-paper-sunk)}

/* ---- post detail + transcript (DESIGN.md Component 3 & 4) ---- */
.detail h1{font-size:var(--text-display);line-height:var(--leading-display)}
.provenance{margin-top:var(--space-4)}
.redaction-note{margin-top:var(--space-3);font-size:var(--text-meta);
  line-height:var(--leading-meta);color:var(--color-ink-faint)}
.transcript{margin-top:var(--space-6);background:var(--color-paper-raised);
  border:1px solid var(--color-rule);border-radius:var(--radius-surface);padding:var(--space-5)}
.turn{margin-top:var(--space-5)}
.turn:first-child{margin-top:0}
.speaker{font-size:var(--text-meta);line-height:var(--leading-meta);
  color:var(--color-ink-muted);margin-bottom:var(--space-1)}
.bubble{max-width:76%;padding:var(--space-3) var(--space-4);
  font-size:var(--text-read);line-height:var(--leading-read);white-space:pre-wrap}
.turn-left .bubble{background:var(--color-paper-sunk);
  border-radius:var(--radius-bubble) var(--radius-bubble) var(--radius-bubble) 4px}
.turn-right{display:flex;flex-direction:column;align-items:flex-end}
.turn-right .speaker{text-align:right}
.turn-right .bubble{background:var(--color-cinnabar-wash);
  border-right:2px solid var(--color-cinnabar);
  border-radius:var(--radius-bubble) var(--radius-bubble) 4px var(--radius-bubble)}
.turn .ts{font-size:var(--text-micro);line-height:var(--leading-micro);
  color:var(--color-ink-faint);margin-top:var(--space-1)}
.turn-right .ts{text-align:right}
.zh-source{display:none;margin-top:var(--space-2);padding-top:var(--space-2);
  border-top:1px solid var(--color-rule);font-family:var(--font-mono);
  font-size:var(--text-meta);line-height:var(--leading-meta);color:var(--color-ink-muted);
  white-space:pre-wrap}
.transcript.show-zh .zh-source{display:block}
.zh-toggle{margin-top:var(--space-4);background:none;border:0;padding:0;
  color:var(--color-cinnabar-deep);cursor:pointer;font-size:var(--text-body)}
.quote{font-size:var(--text-meta);color:var(--color-ink-muted);
  border-left:2px solid var(--color-rule);padding-left:var(--space-2);
  margin-bottom:var(--space-2)}

/* ---- service + topic pages ---- */
.prose{max-width:var(--measure-en)}
.prose h2{font-size:var(--text-h2);line-height:var(--leading-h2);margin-top:var(--space-7)}
.prose h3{font-size:var(--text-h3);line-height:var(--leading-h3);margin-top:var(--space-6)}
.prose p,.prose li{font-size:var(--text-read);line-height:var(--leading-read)}
.prose p{margin:var(--space-3) 0 0}
.card-list{margin-top:var(--space-6);border-top:1px solid var(--color-rule)}
.card-list a{display:block;padding:var(--space-4) 0;
  border-bottom:1px solid var(--color-rule);color:var(--color-ink)}
.card-list .sub{font-size:var(--text-meta);color:var(--color-ink-muted);
  margin-top:var(--space-1)}
.pager{margin-top:var(--space-7);display:flex;gap:var(--space-4);
  font-size:var(--text-body)}
.cta{margin-top:var(--space-7);background:var(--color-paper-raised);
  border:1px solid var(--color-rule);border-radius:var(--radius-surface);padding:var(--space-5)}
.btn{display:inline-block;margin-top:var(--space-3);padding:var(--space-3) var(--space-5);
  background:var(--color-cinnabar);color:var(--color-paper);
  border-radius:var(--radius-control)}
.btn:hover{background:var(--color-cinnabar-deep);text-decoration:none}

/* ---- lightbox (Component 6) ---- */
.lightbox{position:fixed;inset:0;background:var(--scrim-lightbox);display:none;
  flex-direction:column;align-items:center;justify-content:center;z-index:50;gap:var(--space-3)}
.lightbox.is-open{display:flex}
.lightbox img{max-height:90vh;max-width:92vw;border-radius:var(--radius-surface);
  box-shadow:var(--shadow-float)}
.lightbox .counter{font-size:var(--text-meta);color:var(--color-paper)}
.lightbox .close{position:absolute;top:var(--space-5);right:var(--space-5);
  background:none;border:0;color:var(--color-paper);cursor:pointer;font-size:var(--text-body)}

/* ---- narrow screens: the rail stops being a rail ---- */
@media (max-width:900px){
  .shell-inner{flex-direction:column;padding:0 16px}
  .rail{width:100%;flex:none;position:static;min-height:0;border-right:0;
    border-bottom:1px solid var(--color-rule);padding-right:0;padding-bottom:var(--space-6)}
  /* DESIGN.md specifies the rail for desktop only. Stacked on a phone the portrait
     would fill the whole first screen, so it is cropped to a band and the content
     starts above the fold. */
  .rail-portrait{margin:0 -16px;max-height:42vh;overflow:hidden}
  .rail-portrait img{object-fit:cover;object-position:center 22%;height:42vh}
  .column{padding:var(--space-6) 0 var(--space-8);max-width:100%}
  .post{gap:var(--space-4)}
  .shots{flex-basis:110px}
  .bubble{max-width:88%}
}

/* ---- rail: temple map + contact ---------------------------------------------- */
.rail-map{margin-top:var(--space-6)}
.rail-map iframe{width:100%;height:170px;border:1px solid var(--color-rule);
  border-radius:var(--radius-surface);display:block;background:var(--color-paper-sunk);
  filter:saturate(.88)}
.rail-map-cap{margin-top:var(--space-2);font-size:var(--text-meta);
  line-height:var(--leading-meta);color:var(--color-ink-muted)}
.rail-map-cap strong{color:var(--color-ink);font-weight:500}
.rail-map-cap .zh-line{font-family:var(--font-brush);color:var(--color-ink-faint)}
.rail-map-cap a{display:inline-block;margin-top:var(--space-1)}

.contact-head{font-family:var(--font-display);font-weight:400;font-size:var(--text-h2);
  line-height:var(--leading-h2);color:var(--color-ink);margin:0 0 var(--space-3)}
.rail-contact{gap:0}
.contact-row{display:flex;gap:var(--space-3);padding:var(--space-3) 0;
  border-top:1px solid var(--color-rule);color:var(--color-ink);text-decoration:none}
.contact-row:hover{text-decoration:none}
.contact-row:hover .contact-v{text-decoration:underline;text-underline-offset:3px}
.contact-k{flex:0 0 58px;color:var(--color-ink-faint)}
.contact-v{color:var(--color-cinnabar-deep);word-break:break-all}
.contact-row.is-qr .contact-v{color:var(--color-ink)}
.qr{display:block;margin-top:var(--space-3);text-align:center;color:var(--color-ink-muted)}
.qr img{width:150px;height:150px;display:block;margin:0 auto;
  background:var(--color-paper-raised);border:1px solid var(--color-rule);
  border-radius:var(--radius-surface);padding:var(--space-2)}
.qr span{display:block;margin-top:var(--space-2);font-size:var(--text-meta)}
.qr:hover{text-decoration:none}
.reply-note{margin-top:var(--space-4);padding-top:var(--space-3);
  border-top:1px solid var(--color-rule);color:var(--color-ink-faint)}

/* ---- service / FAQ call to action ------------------------------------------- */
.cta-contacts{display:flex;gap:var(--space-6);align-items:flex-start;flex-wrap:wrap;
  margin-top:var(--space-4)}
.cta-line{margin-top:var(--space-2);font-size:var(--text-meta);
  line-height:var(--leading-meta);color:var(--color-ink-muted)}
.cta-qr{flex:0 0 128px;text-align:center;color:var(--color-ink-muted)}
.cta-qr img{width:128px;height:128px;display:block;background:var(--color-paper);
  border:1px solid var(--color-rule);border-radius:var(--radius-surface);
  padding:var(--space-2)}
.cta-qr span{display:block;margin-top:var(--space-2);font-size:var(--text-micro);
  line-height:var(--leading-micro)}
.cta-qr:hover{text-decoration:none}

/* ---- breadcrumbs + home filter ---------------------------------------------- */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);
  margin-bottom:var(--space-4);font-size:var(--text-meta);
  line-height:var(--leading-meta);color:var(--color-ink-muted)}
.crumbs a{color:var(--color-ink-muted)}
.crumbs a:hover{color:var(--color-cinnabar-deep)}
.crumbs .sep{color:var(--color-ink-faint)}
.crumbs [aria-current]{color:var(--color-ink)}

.back-link{display:inline-block;margin-bottom:var(--space-4);font-size:var(--text-meta);
  color:var(--color-ink-muted)}
.back-link:hover{color:var(--color-cinnabar-deep)}

.filters{display:flex;flex-wrap:wrap;gap:var(--space-2);
  padding-bottom:var(--space-5);margin-bottom:var(--space-2);
  border-bottom:1px solid var(--color-rule)}
.filters .chip{display:inline-flex;align-items:baseline;gap:5px;
  padding:4px var(--space-3);border:1px solid var(--color-rule);
  border-radius:var(--radius-full);font-size:var(--text-meta);
  line-height:var(--leading-meta);color:var(--color-ink);background:var(--color-paper-raised)}
.filters .chip:hover{border-color:var(--color-cinnabar);text-decoration:none}
.filters .chip.is-on{background:var(--color-cinnabar);border-color:var(--color-cinnabar);
  color:var(--color-paper)}
.filters .chip .n{color:var(--color-ink-faint);font-size:var(--text-micro)}
.filters .chip.is-on .n{color:var(--color-cinnabar-wash)}
.filters .rule{flex-basis:100%;height:0}
.filters .group-label{align-self:center;font-size:var(--text-micro);
  color:var(--color-ink-faint);margin-right:var(--space-1)}

/* ---- prices ------------------------------------------------------------------ */
.price-tag{display:inline-block;margin-top:var(--space-3);padding:3px var(--space-3);
  border:1px solid var(--color-gilt);border-radius:var(--radius-seal);
  font-size:var(--text-meta);line-height:var(--leading-meta);color:var(--color-ink);
  background:var(--color-paper-raised)}
.price-tag.is-inline{margin-top:0}