/* Layout: one endless monospace field. A square of open ground holds the menu; an old village rings it;
   roads lead out through fields to a modern city in the east. The camera moves; nothing scrolls.
   Palette follows the sun in the visitor's time zone, not the OS theme. JS rewrites these tokens as the day turns. */
:root{
  --bg:#ececea;      /* paper */
  --ink:#2b2c2e;     /* words */
  --city:#6a5f50;    /* the town, in a softer umber ink so the words stay on top */
  --muted:#8b8a86;   /* secondary words, HUD */
  --faint:#cdc8c0;   /* hatching, fields, street marks */
  --lamp:#b9772f;    /* electric light; the only accent, mostly seen after dark */
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Noto Serif SC", "Songti SC", "STSong", monospace;
  --cjk:"Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --fs:14px; --lh:20px;
  color-scheme:light;
}
html,body{height:100%;overflow:hidden}
html{margin-top:0!important}
#wpadminbar{opacity:.85}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--fs)/var(--lh) var(--mono);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

#stage{position:fixed;inset:0;overflow:hidden;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;animation:arrive 1.4s ease-out both}
#stage.dragging{cursor:grabbing}
@keyframes arrive{from{opacity:.25}to{opacity:1}}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block}
#world{position:absolute;left:0;top:0;width:0;height:0;will-change:transform}

.w{position:absolute;display:block;white-space:pre;height:var(--lh);line-height:var(--lh);font-size:var(--fs);color:var(--ink);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.w.it{color:var(--muted);transition:color .3s ease}
.w.it:hover,.w.it:focus-visible{color:var(--ink)}
.w .pre{color:var(--muted)}
.w .lbl{position:relative;display:inline-block}
.w .en,.w .zh{transition:opacity .45s ease,filter .45s ease}
.w .zh{position:absolute;left:50%;top:0;transform:translateX(-50%);opacity:0;filter:blur(3px);font-family:var(--cjk);letter-spacing:.12em;white-space:nowrap}
.w:hover .en:not(:only-child),.w:focus-visible .en:not(:only-child),.w.tz .en:not(:only-child){opacity:0;filter:blur(3px)}
.w:hover .zh,.w:focus-visible .zh,.w.tz .zh{opacity:1;filter:blur(0)}
.w.home{font-weight:300}
.w.home .zh{font-size:1.45em;letter-spacing:0}
.w:focus-visible,.q:focus-visible,.sign:focus-visible{outline:1px dashed var(--muted);outline-offset:5px}
.w:focus{outline:none}
.w.hd .en{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .8s ease}
.w.hd[href]:hover .en,.w.hd.beckon .en{background-size:100% 1px}
.fk{opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity .35s ease,transform .35s ease}
.fk.open{opacity:1;pointer-events:auto;transform:none}
.fk.second{transition-delay:.08s}

.q{position:absolute;height:var(--lh);line-height:var(--lh);padding:0;margin:0;border:0;background:none;color:var(--ink);font:inherit;cursor:pointer}
.q.flash{animation:collapse .8s cubic-bezier(.2,.7,.2,1)}
@keyframes collapse{0%{transform:scale(2.4);opacity:.15}100%{transform:scale(1);opacity:1}}
.tag{position:absolute;white-space:pre;height:var(--lh);line-height:var(--lh);color:var(--muted);opacity:0;transition:opacity 1.4s ease;pointer-events:none}
.tag.on{opacity:1}

.sign{position:absolute;white-space:pre;height:var(--lh);line-height:var(--lh);color:var(--city);text-decoration:none;transition:color .5s ease,text-shadow .5s ease}
.sign:hover{color:var(--lamp)}
:root.lit .sign{color:var(--lamp);text-shadow:0 0 9px color-mix(in srgb,var(--lamp) 55%,transparent)}

#hud{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 16px calc(12px + env(safe-area-inset-bottom,0px));font-size:12px;color:var(--muted);pointer-events:none;font-variant-numeric:tabular-nums}
#hud button{pointer-events:auto;background:color-mix(in srgb,var(--bg) 82%,transparent);border:0;margin:0;padding:4px 6px;border-radius:3px;color:inherit;font:inherit;cursor:pointer;white-space:pre;transition:color .3s ease}
#hud button:hover,#hud button:focus-visible{color:var(--ink)}
#hud button:focus-visible{outline:1px dashed var(--muted);outline-offset:3px}
#sun{font-family:var(--mono)}

#ta{position:fixed;left:0;top:0;width:2px;height:2px;padding:0;border:0;margin:0;opacity:0;resize:none;overflow:hidden;font-size:16px;pointer-events:none;background:transparent;color:transparent}

@media (prefers-reduced-motion:reduce){
  #stage{animation:none}
  .q.flash{animation:none}
  .fk{transition:opacity .2s ease;transform:none}
}

/* photos in the plazas */
#photos{position:absolute;left:0;top:0;width:0;height:0;will-change:transform;mix-blend-mode:multiply}
:root.dark #photos{mix-blend-mode:screen}   /* by day printed into the paper; by night only the light in them shows */
.photo{position:absolute;display:block;-webkit-tap-highlight-color:transparent}
.photo img{display:block;width:100%;height:100%;object-fit:cover;border:0;opacity:.9;
  filter:grayscale(1) sepia(.18) contrast(.95);transition:filter 1.6s ease,opacity 1.6s ease;
  -webkit-mask-image:radial-gradient(closest-side,#000 40%,rgba(0,0,0,.8) 58%,rgba(0,0,0,.45) 74%,rgba(0,0,0,.16) 88%,transparent);
  mask-image:radial-gradient(closest-side,#000 40%,rgba(0,0,0,.8) 58%,rgba(0,0,0,.45) 74%,rgba(0,0,0,.16) 88%,transparent)}
.photo.portrait img{opacity:.8;filter:grayscale(1) sepia(.14) contrast(.74) brightness(1.28);   /* lifts the dark backdrop toward the paper */
  -webkit-mask-image:linear-gradient(to right,transparent,rgba(0,0,0,.35) 4%,rgba(0,0,0,.75) 9%,#000 15%,#000 85%,rgba(0,0,0,.75) 91%,rgba(0,0,0,.35) 96%,transparent),linear-gradient(to bottom,transparent,rgba(0,0,0,.35) 4%,rgba(0,0,0,.75) 8%,#000 13%,#000 74%,rgba(0,0,0,.75) 84%,rgba(0,0,0,.35) 93%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,rgba(0,0,0,.35) 4%,rgba(0,0,0,.75) 9%,#000 15%,#000 85%,rgba(0,0,0,.75) 91%,rgba(0,0,0,.35) 96%,transparent),linear-gradient(to bottom,transparent,rgba(0,0,0,.35) 4%,rgba(0,0,0,.75) 8%,#000 13%,#000 74%,rgba(0,0,0,.75) 84%,rgba(0,0,0,.35) 93%,transparent);mask-composite:intersect}   /* a square, feathered on every side */
.photo.sheet img{opacity:.9;filter:grayscale(1) contrast(.96);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 66%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 66%,transparent);mask-composite:intersect}
.photo:hover img,.photo:focus-visible img{opacity:1}
.photo:focus-visible{outline:1px dashed var(--muted);outline-offset:4px}
:root.dark .photo img{filter:grayscale(1) brightness(.62) contrast(1.15);opacity:.85}
:root.dark .photo.sheet img{filter:invert(1) grayscale(1) brightness(.7) contrast(1.1);opacity:.8}
.w.cap{white-space:normal;height:auto;text-align:center;text-wrap:balance}

/* time can be held still while the day runs past */
#hud #pause{display:inline-flex;align-items:center;justify-content:center;width:26px;height:21px;padding:0;margin:0 -10px 0 auto}
#hud #pause[hidden]{display:none}
#pause i{display:block;width:8px;height:9px;box-sizing:border-box;border-left:2.5px solid currentColor;border-right:2.5px solid currentColor}
#pause.held i{width:8px;border:0;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}

/* paper grain over the ground by day; the JS moves it with the world and fades it as night comes */
#grain{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;background-size:192px 192px;opacity:0;transition:opacity 2s ease}