/* 闪光坐标 · shared shell + MAP / INDEX / ROUTES / ABOUT / COORD
   depends on ui/coordinates.css for tokens + nav + shared language */

main.page {
  min-height: 70vh;
  padding: 0 0 10vh;
}

.page-id {
  padding: 2vh 48px 0;
}
.page-id .accent { letter-spacing: 0; }

/* compact internal header: moving deeper, not restarting */
.site-nav.slim {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 26px 48px 8px;
}
.site-nav.slim .sc-home:hover { color: var(--accent); }
.site-nav.slim .slim-id { letter-spacing: .14em; }
.site-nav.slim nav { margin-left: auto; display: flex; gap: 30px; }
.site-nav.slim nav a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--faint);
}
.site-nav.slim nav a:hover, .site-nav.slim nav a[aria-current="page"] { color: var(--ink); }

.site-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6vh 48px 5vh;
}
.site-foot a:hover { color: var(--ink); }

.site-nav .brand a:hover { color: var(--accent); }

/* ---------- MAP ---------- */

/* filters are secondary: small, dim, out of the way */
.map-filters {
  display: flex;
  gap: 20px;
  padding: 1vh 48px 0;
  flex-wrap: wrap;
}
.map-filters button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--faint);
  opacity: .75;
  padding: 2px 0;
  border-bottom: 1px solid transparent;
}
.map-filters button[aria-pressed="true"] {
  color: var(--ink);
  opacity: 1;
  border-bottom-color: var(--line);
}
.map-filters button:hover { color: var(--ink); opacity: 1; }
.map-filters .count { opacity: .6; margin-left: 3px; letter-spacing: .04em; }

.map-scroll { margin-top: 1vh; }
.map-field {
  position: relative;
  height: 78vh;
  min-height: 540px;
}

/* constellations: far away, memories form clusters */
.cl { position: absolute; }
.cl-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--faint);
  white-space: nowrap;
  background: none;
  border: 0;
  padding: 4px 6px;
  cursor: pointer;
  transition: color .4s ease, opacity .4s ease;
}
.cl-label .cl-n { opacity: .55; margin-left: 6px; letter-spacing: .04em; }
.cl-label.accent { color: var(--accent); }
.cl a.pt-mark {
  position: absolute;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
  color: var(--ink);
  opacity: .14;
  padding: 4px;
  transform: translate(-50%, -50%);
  transition: opacity .45s ease;
}
.cl a.pt-mark.n3 { color: var(--accent); opacity: .5; }
/* closer: individual coordinates appear */
.cl:hover a.pt-mark, .cl:focus-within a.pt-mark { opacity: .8; }
.cl:hover a.pt-mark.n3, .cl:focus-within a.pt-mark.n3 { opacity: 1; }
.cl:hover .cl-label, .cl:focus-within .cl-label { color: var(--ink); }
.cl:hover .cl-label.accent, .cl:focus-within .cl-label.accent { color: var(--accent); }
.cl a.pt-mark:hover, .cl a.pt-mark:focus-visible { opacity: 1; }
/* filter: whole constellations recede */
.map-field.f-on .cl { opacity: .14; pointer-events: none; }
.map-field.f-on .cl.f-hit { opacity: 1; pointer-events: auto; }

/* focused constellation: moved deeper, points stay revealed */
.map-field.has-focus .cl:not(.focused) { opacity: .1; }
.cl.focused a.pt-mark { opacity: .85; }
.cl.focused a.pt-mark.n-ph { opacity: .75; }
.cl.focused a.pt-mark.n3 { opacity: 1; }
.cl.focused .cl-label { color: var(--ink); }

.map-tick {
  position: absolute;
  bottom: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .24em;
  color: var(--faint);
  opacity: .4;
}

.map-tip {
  position: fixed;
  z-index: 6;
  max-width: 300px;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 12px 14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
}
.map-tip.on { opacity: 1; }
.map-tip .t-title { font-size: 13px; line-height: 1.6; margin: 4px 0; }
.map-tip img { margin-top: 8px; max-height: 110px; object-fit: cover; }

.map-stream { display: none; padding: 2vh 24px; }
.map-stream .m-cl { margin: 0 0 2px; }
.map-stream .m-cl summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  list-style: none;
  cursor: pointer;
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 40%, transparent);
}
.map-stream .m-cl summary::-webkit-details-marker { display: none; }
.map-stream .m-cl[open] summary .coord-label:first-child { color: var(--ink); }
.map-stream a {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 5px 0 5px 14px;
  font-size: 13px;
}
.map-stream a .coord-label { flex-shrink: 0; }
.map-stream a .m-date { margin-left: auto; }

/* ---------- INDEX (archive) ---------- */

.idx-controls {
  display: flex;
  gap: 22px;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 3vh 48px 0;
}
.idx-controls input[type="search"] {
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--ink);
  padding: 4px 2px;
  width: 250px;
  outline: none;
}
.idx-controls input[type="search"]::placeholder { color: var(--faint); }
.idx-controls input[type="search"]:focus { border-bottom-color: var(--ink); }
.idx-controls select {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--faint);
  padding: 3px 0;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.idx-controls select:hover, .idx-controls select:focus { color: var(--ink); border-bottom-color: var(--line); }
.idx-count { margin-left: auto; }

.idx-table {
  width: calc(100% - 96px);
  margin: 3vh 48px 0;
  border-collapse: collapse;
}
.idx-table th {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .2em;
  color: var(--faint);
  text-align: left;
  padding: 0 14px 8px 0;
  border-bottom: 1px solid var(--line);
}
.idx-table td {
  padding: 5px 14px 5px 0;
  font-size: 13px;
  line-height: 1.7;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 36%, transparent);
  white-space: nowrap;
}
.idx-table td.t-title {
  white-space: normal;
  min-width: 200px;
  width: 52%;
}
.idx-table td.t-title a { color: var(--ink); }
.idx-table td.t-title a:hover { color: var(--accent); }
.idx-table td .coord-label { letter-spacing: .12em; }
.idx-table tr:hover td { background: color-mix(in srgb, var(--line) 16%, transparent); }
.idx-table a.row-link { display: contents; }
.idx-table .src a:hover { color: var(--ink); }

/* preview lives in the unused right margin, not under the cursor */
.idx-preview {
  position: fixed;
  right: 48px;
  top: 30vh;
  z-index: 6;
  pointer-events: none;
  border: 1px solid var(--line);
  max-width: 240px;
  max-height: 170px;
  object-fit: cover;
  opacity: 0;
  transition: opacity .2s ease;
}
.idx-preview.on { opacity: 1; }

.idx-empty { padding: 8vh 48px; }
.idx-empty .pix { margin-bottom: 2vh; }

/* ---------- ROUTES ---------- */

/* nine paths scattered through a large field */
.routes-field { padding: 2vh 48px 4vh; }
.r-block {
  display: block;
  width: max-content;
  max-width: min(430px, 82vw);
  position: relative;
}
.r-block .r-gesture { display: block; margin: 8px 0 4px; max-width: 100%; }
.r-block .r-gesture path {
  stroke: var(--line);
  stroke-width: 1.25;
  fill: none;
}
.r-block .r-gesture .p-faint { stroke-dasharray: 2 6; }
.r-block .r-gesture text { font-family: var(--mono); font-size: 11px; fill: var(--faint); }
.r-block .r-gesture .r-star { fill: var(--accent); }
.r-block .r-title {
  display: block;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .05em;
  margin-top: 2px;
}
.r-block .r-note { display: block; font-size: 13px; color: var(--faint); margin-top: 4px; }
.r-block .r-count { display: block; margin-top: 6px; }
.r-block .r-img {
  position: absolute;
  right: -104px;
  top: 6px;
  width: 84px;
  opacity: .9;
}
.r-block .r-stops {
  display: block;
  font-size: 12px;
  color: var(--faint);
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, opacity .35s ease;
  opacity: 0;
}
.r-block:hover .r-stops, .r-block:focus-visible .r-stops { max-height: 3.4em; opacity: 1; margin-top: 6px; }
.r-block:hover .r-title { color: var(--ink); }
.r-block:hover .r-gesture path { stroke: var(--ink); }
@media (max-width: 900px) {
  .routes-field { padding: 2vh 24px 4vh; }
  .r-block { margin-left: 0 !important; margin-top: 7vh !important; }
  .r-block .r-img { position: static; margin-bottom: 8px; }
}

/* route detail: an editorial journey, not a playlist */
.rd-head { padding: 4vh 48px 0; max-width: 720px; }
.rd-head h1 { font-size: 24px; font-weight: 500; letter-spacing: .06em; margin: 1vh 0; }
.rd-head .dim-text { max-width: 46em; }
.rd-stops { padding: 5vh 48px 0; max-width: 1200px; }
.rd-joint {
  font-family: var(--mono);
  color: var(--faint);
  margin: 3.5vh 0;
  user-select: none;
}
.rd-m { margin-bottom: 4vh; max-width: 420px; }
.rd-m img { display: block; margin: 10px 0; }
.rd-m .rd-m-title { display: block; font-size: 15px; line-height: 1.8; margin-top: 6px; }
.rd-m .rd-m-title:hover { color: var(--accent); }
.rd-m .rd-m-note { font-family: var(--serif); font-size: 15px; line-height: 2.1; margin-top: 8px; max-width: 26em; }
.rd-m .rd-m-src { margin-top: 4px; }

/* rhythm slots: intentionally unequal */
.rd-lg { max-width: min(640px, 54vw); }
.rd-lg img { width: 100%; }
.rd-lg .rd-m-title { font-size: 17px; }
.rd-tiny { max-width: 300px; }
.rd-tiny img { width: 150px; }
.rd-tiny .rd-m-title { font-size: 13px; }
.rd-md { max-width: 460px; }
.rd-md img { width: 380px; max-width: 100%; }
.rd-xs { max-width: 320px; padding: 1vh 0; }
.rd-xs .rd-m-title { font-size: 13px; color: var(--ink); }
.rd-big { max-width: min(880px, 68vw); margin-top: 10vh; margin-bottom: 10vh; }
.rd-big img { width: 100%; }
.rd-big .rd-m-title { font-size: 20px; letter-spacing: .04em; margin-top: 12px; }
.rd-big .rd-m-note { font-size: 16px; }
.rd-sm { max-width: 340px; }
.rd-sm img { width: 220px; }
.rd-sm .rd-m-title { font-size: 14px; }
.rd-quiet { max-width: 300px; margin-bottom: 2vh; }
.rd-quiet img { width: 180px; }
.rd-quiet .rd-m-title { font-size: 13px; color: var(--ink); }

/* an audio stop is an archive object, not a text-only fallback */
.rd-audio { width: min(430px, 38vw); margin-top: 7vh; margin-bottom: 9vh; }
.rd-audio-major { width: min(620px, 52vw); margin-top: 12vh; margin-bottom: 12vh; }
.rd-audio-object { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 18px; margin: 14px 0 12px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rd-audio-mark { font: 24px var(--mono); color: var(--faint); }
.rd-audio-object audio { width: 100%; min-width: 0; height: 32px; }

/* travel fragments between moments */
.rd-travel { margin: 1vh 0 3vh; }
.rd-frag path { stroke: var(--line); stroke-width: 1.25; fill: none; }
.rd-more { margin: 6vh 0 0; }
.rd-end { padding: 6vh 48px 0; }
.rd-end .pix-panda-end { width: 36px; margin-bottom: 12px; }
@media (max-width: 900px) {
  .rd-m, .rd-travel { margin-left: 0 !important; }
  .rd-joint { margin-left: 0 !important; }
  .rd-lg, .rd-big { max-width: 100%; }
  .rd-more { margin-left: 0 !important; }
  .rd-audio, .rd-audio-major { width: 100%; }
}

/* one small resident near the routes intro */
.routes-intro { display: flex; align-items: flex-end; gap: 14px; padding: 2vh 48px 0; }
.routes-intro .dim-text { max-width: 42em; }
.routes-intro .pix { width: 20px; margin-bottom: 4px; }

/* ---------- ABOUT ---------- */

.about-open { padding: 8vh 48px 0; display: grid; grid-template-columns: minmax(300px, 5fr) 4fr; gap: 6vw; }
.about-open h1 { font-size: 30px; font-weight: 500; letter-spacing: .1em; margin-top: 2vh; }
.about-open .en { display: block; margin-top: 4px; }
.about-photo-lg { max-width: 460px; }
.about-photo-lg img { width: 100%; }
.about-photo-lg figcaption { margin-top: 8px; }
.about-basic { margin-top: 6vh; max-width: 30em; }
.about-basic dt { float: left; clear: left; width: 9em; color: var(--faint); font-size: 13px; }
.about-basic dd { margin-left: 10em; font-size: 14px; margin-bottom: 6px; }

.about-q { font-size: 21px; font-weight: 500; letter-spacing: .06em; margin: 7vh 0 1.5vh; }

.about-frag { padding: 12vh 48px 0; max-width: 780px; }
.about-frag.push { margin-left: 22vw; }
.about-frag h2 { font-size: 17px; font-weight: 500; letter-spacing: .08em; margin: 1vh 0 2vh; }
.about-frag ul { list-style: none; }
.about-frag li { padding: 3px 0; font-size: 14px; }
.about-frag li .coord-label { margin-right: 12px; }

/* fragments drift instead of lining up like records */
.about-frag.scatter { padding-top: 9vh; }
.about-frag.scatter li { padding: 10px 0; max-width: 34em; }
.about-frag.scatter li:nth-child(2) { margin-left: 14%; }
.about-frag.scatter li:nth-child(3) { margin-left: 4%; }
.about-frag.scatter li:nth-child(4) { margin-left: 26%; }
.about-frag.scatter li:nth-child(5) { margin-left: 8%; }
.about-frag.scatter li:nth-child(6) { margin-left: 32%; }
.about-frag.scatter li:nth-child(7) { margin-left: 2%; }
.about-frag.scatter li:nth-child(8) { margin-left: 20%; font-size: 15px; }

.about-basicidx { padding: 12vh 48px 0; }
.about-basicidx .coord-label { line-height: 2.4; letter-spacing: .12em; }
.about-basicidx > .coord-label.dim { margin-bottom: 1vh; display: block; }

.about-quote { padding: 14vh 48px 0; max-width: 640px; margin-left: 18vw; }
.about-quote blockquote {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 2.1;
  letter-spacing: .04em;
}
.about-quote figcaption { margin-top: 1.5vh; }
.about-quote audio { margin-top: 1vh; width: 260px; height: 32px; }

.about-strip { padding: 12vh 48px 0; display: flex; gap: 4vw; align-items: flex-end; flex-wrap: wrap; }
.about-strip figure { max-width: 200px; }
.about-strip figure.big { max-width: 300px; }
.about-strip figcaption { margin-top: 6px; }

.about-read { padding: 12vh 48px 10vh; max-width: 680px; }
.about-read li { padding: 6px 0; font-size: 14px; list-style: none; }
.about-read li em { font-style: normal; color: var(--faint); font-size: 12px; margin-left: 10px; }
.about-read a:hover { color: var(--accent); }

/* ---------- COORD detail ---------- */

.cd-back { padding: 3vh 48px 0; display: flex; gap: 28px; }
.cd-back a:hover { color: var(--ink); }
.cd-main { padding: 5vh 48px 0; }
.cd-grid {
  display: grid;
  grid-template-columns: 180px minmax(0, 860px);
  gap: 5vw;
  align-items: start;
}
.cd-rail { position: sticky; top: 5vh; }
.cd-rail p { margin-bottom: 4px; }
.cd-rail .cd-rail-gap { margin-top: 3vh; }
.cd-rail a:hover { color: var(--accent); }
.coord-light button.coord-light {
  appearance: none; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--ink); padding: 0 0 3px;
  font: 12px var(--mono); letter-spacing: .12em; cursor: pointer;
}
.coord-light button.coord-light:hover .light-symbol,
.coord-light button.coord-light.is-lit { color: var(--accent); }
.coord-light button.coord-light:disabled { cursor: wait; opacity: .55; }
.coord-light .dim-text { font-size: 11px; }
.coord-light button.coord-light.pulse { animation: light-pulse .7s ease-out; }
@keyframes light-pulse {
  45% { color: var(--accent); text-shadow: 0 0 14px rgba(168,151,92,.55); transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .coord-light button.coord-light.pulse { animation: none; }
}
.cd-body h1 { font-size: 22px; font-weight: 500; letter-spacing: .05em; margin: 0 0 3.5vh; max-width: 26em; line-height: 1.8; }
.cd-media img { max-height: 68vh; width: auto; max-width: 100%; }
.cd-media iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; background: color-mix(in srgb, var(--ink) 22%, var(--bg)); }
.cd-audio { display: flex; flex-direction: column; gap: 10px; padding: 4vh 0; }
.cd-audio audio { width: 340px; max-width: 100%; }
.cd-poster {
  display: block;
  position: relative;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}
.cd-poster img { display: block; max-height: 68vh; width: auto; max-width: 100%; }
.cd-poster > .coord-label {
  position: absolute;
  left: 14px;
  bottom: 12px;
  color: #fff;
  text-shadow: 0 1px 6px rgba(20, 26, 44, .55);
  letter-spacing: .24em;
}
.cd-poster:hover > .coord-label { color: var(--accent); }
.cd-cover { position: relative; display: inline-block; }
.cd-cover > .coord-label {
  position: absolute;
  left: 14px;
  bottom: 12px;
  color: #fff;
  text-shadow: 0 1px 6px rgba(20, 26, 44, .55);
}
.cd-blank {
  display: inline-flex;
  flex-direction: column;
  gap: 12px;
  padding: 7vh 0;
}
.cd-blank:hover .coord-label { color: var(--accent); }
.cd-text { margin-top: 3vh; max-width: 36em; font-family: var(--serif); font-size: 16px; line-height: 2.2; }
.cd-prevnext {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding: 8vh 48px 0;
  font-size: 13px;
}
.cd-prevnext a:hover { color: var(--accent); }
.cd-prevnext .cd-next { text-align: right; }
.cd-related { padding: 9vh 48px 0; }
.cd-related ul { list-style: none; margin-top: 1vh; }
.cd-related li { padding: 3px 0; }
.cd-related a { font-size: 13px; }
.cd-related a:hover { color: var(--accent); }
.cd-related a .coord-label { margin-right: 14px; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .site-nav.slim { flex-wrap: wrap; padding: 18px 24px 6px; row-gap: 6px; }
  .site-nav.slim .slim-id { display: none; }
  .site-nav.slim nav { margin-left: 0; width: 100%; gap: 22px; }
  .idx-table th:nth-child(2), .idx-table td:nth-child(2) { display: none; }
  .cd-prevnext { flex-wrap: wrap; }
  .cd-prevnext .cd-next { text-align: left; }
  .page-id, .map-filters, .idx-controls, .rd-head, .rd-stops, .rd-end,
  .cd-back, .cd-main, .cd-related, .about-frag, .about-read, .site-foot { padding-left: 24px; padding-right: 24px; }
  .map-scroll { display: none; }
  .map-stream { display: block; }
  .idx-table { width: calc(100% - 48px); margin: 3vh 24px 0; }
  .idx-table .t-series, .idx-table th.h-series { display: none; }
  .about-open { grid-template-columns: 1fr; padding: 4vh 24px 0; }
  .cd-grid { grid-template-columns: 1fr; gap: 3vh; }
  .cd-rail { position: static; }
  .cd-prevnext, .about-basicidx { padding-left: 24px; padding-right: 24px; }
  .about-frag.push { margin-left: 0; }
  .about-quote { margin-left: 0; padding-left: 24px; padding-right: 24px; }
  .about-strip { padding-left: 24px; }
  .idx-preview { display: none; }
}

/* photo glyphs are visually heavy: keep them quieter at rest */
.cl a.pt-mark.n-ph { font-size: 10px; opacity: .11; }
.cl:hover a.pt-mark.n-ph, .cl:focus-within a.pt-mark.n-ph { opacity: .7; }

/* engaged filters */
.idx-controls select.on, .idx-controls input.on {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.idx-table tbody tr { cursor: pointer; }

/* fragments point back into the archive */
.ev { margin-left: 14px; }
.ev a:hover, .ev-ext:hover { color: var(--accent); }
.ev-ext { margin-left: 14px; }

/* ---------- TODAY / 那年今日 ---------- */

.td-head { padding: 5vh 48px 0; }
.td-head .td-date { font-size: 22px; letter-spacing: .3em; margin: 1vh 0; }
.td-head .dim-text { max-width: 30em; }
.td-flow { padding: 6vh 48px 0; max-width: 1100px; }
.td-year { margin-bottom: 2vh; max-width: 480px; }
.td-y { font-size: 13px; letter-spacing: .3em; color: var(--faint); margin-bottom: 1.2vh; font-weight: 400; }
.td-joint {
  font-family: var(--mono);
  color: var(--faint);
  margin: 3vh 0;
  user-select: none;
}
.td-joint.accent { color: var(--accent); }
.td-m { margin-bottom: 3vh; }
.td-m.td-again { margin-top: 3.5vh; }
.td-m img { display: block; margin: 8px 0; }
.td-lg img { width: min(440px, 100%); }
.td-md img { width: min(320px, 100%); }
.td-sm img { width: 180px; }
.td-m .td-m-title { display: block; font-size: 14px; line-height: 1.8; margin-top: 4px; }
.td-m .td-m-title:hover { color: var(--accent); }
.td-m .td-m-note { font-family: var(--serif); font-size: 15px; line-height: 2.1; margin-top: 6px; max-width: 26em; }
.td-m .td-m-src { margin-top: 3px; }
.td-xs .td-m-title { font-size: 13px; }
.td-end { padding: 4vh 48px 0; }


/* map: a coordinate whose calendar date is today */
.cl a.pt-mark.n-today { color: var(--accent); opacity: .55; }
.cl:hover a.pt-mark.n-today, .cl:focus-within a.pt-mark.n-today,
.cl.focused a.pt-mark.n-today { opacity: 1; }
.cl-label .cl-td { color: var(--accent); margin-left: 6px; letter-spacing: 0; }

@media (max-width: 900px) {
  .td-head, .td-flow, .td-end { padding-left: 24px; padding-right: 24px; }
  .td-year { margin-left: 0 !important; }
  .td-joint { margin-left: 1.5em !important; }
}

/* ---------- SKY / 星愿地球 ---------- */

.sky-head { padding: 4vh 48px 0; }
.sky-title { font-size: 24px; font-weight: 500; letter-spacing: .14em; margin: 1vh 0; }
.sky-head .dim-text { max-width: 34em; }
.sky-stage { position: relative; margin-top: 3vh; }
#sky-globe { display: block; width: 100%; cursor: grab; touch-action: none; }
#sky-globe:active { cursor: grabbing; }
.sky-tip {
  position: absolute;
  pointer-events: none;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 8px 12px;
  line-height: 1.9;
  opacity: 0;
  transition: opacity .15s ease;
  max-width: 200px;
}
.sky-tip.on { opacity: 1; }
.sky-src { position: absolute; right: 48px; bottom: 6px; opacity: .6; }
.sky-wishes { padding: 5vh 48px 0; max-width: 620px; }
.sky-wishes .sky-w { font-size: 14px; line-height: 2; padding: 4px 0; }
.sky-wishes .sky-w .coord-label { margin-right: 12px; }
.sky-cta { padding: 4vh 48px 0; }
.sky-cta a { text-decoration: underline; }
.sky-cta a:hover { color: var(--accent); }
@media (max-width: 900px) {
  .sky-head, .sky-wishes, .sky-cta { padding-left: 24px; padding-right: 24px; }
  .sky-src { right: 24px; }
}

/* ---------- brightness ladder + pixel twinkle ----------
   tiers map to future like counts; today a stable hash sets them */
.cl a.pt-mark.lum-0 { opacity: .07; }
.cl a.pt-mark.lum-1 { opacity: .13; }
.cl a.pt-mark.lum-2 { opacity: .22; animation: tw-2 6s step-end infinite; }
.cl a.pt-mark.lum-3 { opacity: .36; font-size: 13px; animation: tw-3 6s step-end infinite; }
.cl a.pt-mark.lum-4 { opacity: .55; font-size: 13px; animation: tw-4 6s step-end infinite; }
.cl a.pt-mark.n3.lum-4 { opacity: .8; }

@keyframes tw-2 {
  0%, 72%, 100% { opacity: .22; }
  78% { opacity: .4; }
  86% { opacity: .15; }
}
@keyframes tw-3 {
  0%, 68%, 100% { opacity: .36; }
  74% { opacity: .6; }
  82% { opacity: .26; }
}
@keyframes tw-4 {
  0%, 62%, 100% { opacity: .55; }
  68% { opacity: .95; }
  76% { opacity: .4; }
  84% { opacity: .75; }
}

/* interaction states outrank the twinkle */
.cl:hover a.pt-mark, .cl:focus-within a.pt-mark, .cl.focused a.pt-mark,
.map-field.f-on .cl:not(.f-hit) a.pt-mark,
.map-field.has-focus .cl:not(.focused) a.pt-mark,
.cl a.pt-mark:hover, .cl a.pt-mark:focus-visible {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .cl a.pt-mark { animation: none !important; }
}

/* revealed (hover / focused) constellations keep the ladder, just brighter */
.cl:hover a.pt-mark.lum-0, .cl:focus-within a.pt-mark.lum-0, .cl.focused a.pt-mark.lum-0 { opacity: .45; }
.cl:hover a.pt-mark.lum-1, .cl:focus-within a.pt-mark.lum-1, .cl.focused a.pt-mark.lum-1 { opacity: .58; }
.cl:hover a.pt-mark.lum-2, .cl:focus-within a.pt-mark.lum-2, .cl.focused a.pt-mark.lum-2 { opacity: .72; }
.cl:hover a.pt-mark.lum-3, .cl:focus-within a.pt-mark.lum-3, .cl.focused a.pt-mark.lum-3 { opacity: .86; }
.cl:hover a.pt-mark.lum-4, .cl:focus-within a.pt-mark.lum-4, .cl.focused a.pt-mark.lum-4 { opacity: 1; }

/* migrated original-site field guide; same palette, looser editorial reading */
.resource-page { padding-bottom: 12vh; }
.resource-head { padding: 10vh 8vw 15vh; max-width: 920px; }
.resource-head h1 { font-family: var(--serif); font-size: clamp(30px,4.5vw,66px); font-weight: 500; line-height: 1.25; margin: 2vh 0; }
.resource-head .dim-text { max-width: 42em; line-height: 2; }
.resource-chapter { width: min(74vw,980px); margin: 0 0 18vh 9vw; }
.resource-chapter.offset { margin-left: 23vw; width: min(66vw,900px); }
.resource-chapter h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(23px,2.6vw,38px); margin: 1.2vh 0 3vh; }
.resource-chapter > p:not(.coord-label) { line-height: 2; max-width: 48em; }
.resource-chapter a { text-decoration: underline; text-underline-offset: 4px; }
.resource-images { display: grid; grid-template-columns: 1.2fr .8fr 1fr .75fr; align-items: end; gap: 2vw; margin-top: 6vh; }
.resource-images img { display: block; width: 100%; max-height: 46vh; object-fit: contain; object-position: bottom; }

/* ---------- WISH FIELD ---------- */
.wish-body { background: #edf2ff; color: #34415b; }
.wish-body .site-nav { background: #edf2ff; }
.wish-page { overflow: hidden; --bg: #edf2ff; --faint: #687995; --line: #9eb2d7; --accent: #a9882f; }
.wish-head { padding: 8vh 7vw 10vh; }
.wish-head h1 { margin: 2vh 0 3vh; font: 500 clamp(30px,4vw,58px)/1.55 var(--serif); letter-spacing: .08em; }
.wish-head .dim-text { line-height: 2; }
.wish-head #wish-summary { margin-top: 5vh; }
.wish-workspace { display: grid; grid-template-columns: minmax(260px,340px) minmax(520px,1fr); gap: 8vw; align-items: center; padding: 4vh 7vw 14vh; }
.wish-compose { display: grid; gap: 22px; }
.wish-compose label { display: grid; gap: 7px; color: var(--faint); font: 11px var(--mono); letter-spacing: .12em; }
.wish-compose input,.wish-compose textarea,.wish-compose select { width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); padding: 9px 0; font: 14px/1.7 sans-serif; outline: none; }
.wish-compose textarea { min-height: 92px; resize: vertical; }
.wish-compose input:focus,.wish-compose textarea:focus,.wish-compose select:focus { border-color: var(--ink); }
.wish-location { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.wish-compose button { justify-self: start; border: 0; border-bottom: 1px solid var(--ink); background: transparent; padding: 7px 0; cursor: pointer; }
.wish-compose button:disabled { opacity: .4; cursor: not-allowed; }
.wish-trap { position: absolute; left: -9999px; }
.wish-map { position: relative; min-height: 520px; }
.wish-map > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% center; opacity: .68; }
.wish-map-points { position: absolute; inset: 9% 7% 12%; }
.wish-dot { position: absolute; appearance: none; border: 0; padding: 0; background: none; color: #b9912e; cursor: pointer; opacity: var(--star-opacity,.58); }
.wish-star-svg { display:block; width:var(--vector-size,14px); height:var(--vector-size,14px); overflow:visible; transition:transform .2s ease; }
.wish-star-svg .star-bloom { fill:#dfbd5d; transform-box:fill-box; transform-origin:center; }
.wish-star-svg .bloom-3 { opacity:.06; filter:blur(4px) }.wish-star-svg .bloom-2 { opacity:.13; filter:blur(2.2px) }.wish-star-svg .bloom-1 { fill:#f0d887; opacity:.42; filter:blur(1px) }
.wish-star-svg .star-core-halo { fill:#ffe9a7; opacity:.7; filter:blur(1.35px) }
.wish-star-svg .star-core { fill:#fffdf1; stroke:#f1d47d; stroke-width:.45; vector-effect:non-scaling-stroke; }
.wish-dot span { display: none; position: absolute; left: 7px; top: -7px; white-space: nowrap; font: 9px var(--mono); letter-spacing: .08em; }
.wish-dot:hover { color:#8f7732;opacity:1;z-index:2 }.wish-dot:hover .wish-star-svg { transform:scale(1.35) }.wish-dot:hover span { display:block }
.wish-dot.l1 { --star-opacity:.54;--vector-size:12px }.wish-dot.l1 .bloom-2,.wish-dot.l1 .bloom-3 { opacity:.035 }
.wish-dot.l2 { --star-opacity:.72;--vector-size:16px }
.wish-dot.l3 { --star-opacity:.88;--vector-size:22px }
.wish-dot.l4 { --star-opacity:1;--vector-size:31px }.wish-dot.l4 .bloom-3{opacity:.11}
.wish-map-note { position: absolute; right: 2%; bottom: 2%; display: grid; gap: 5px; text-align: right; }
.wish-map-note strong { font: 500 16px var(--serif); }.wish-map-note small { color: var(--faint); }
.wish-stream { padding: 8vh 7vw 18vh; }
.wish-stream > div { margin-top: 7vh; }
.wish-line { width: min(520px,52vw); padding: 0 0 9vh; }
.wish-line p { margin: 10px 0 14px; font: 17px/2 var(--serif); letter-spacing: .03em; }
.wish-line footer { display: flex; justify-content: space-between; color: var(--faint); font-size: 12px; }
.wish-line button { border: 0; background: transparent; cursor: pointer; }.wish-line button:hover { color: var(--accent); }
@media(max-width:760px){.wish-head{padding:6vh 24px 9vh}.wish-workspace{grid-template-columns:1fr;padding:0 24px 12vh;gap:9vh}.wish-map{min-height:390px}.wish-stream{padding:5vh 24px 14vh}.wish-line{width:88%;margin-left:0!important}.wish-line:nth-child(even){margin-left:auto!important}.wish-location{grid-template-columns:1fr}.wish-map-note{right:0}}
.resource-images figure:nth-child(2), .resource-images figure:nth-child(4) { padding-bottom: 5vh; }
.resource-images figcaption { margin-top: 1vh; }
.resource-links,.team-lines { list-style: none; margin-top: 5vh; border-top: 1px solid var(--line); }
.resource-links li,.team-lines li { border-bottom: 1px solid var(--line); }
.resource-links a { display: grid; grid-template-columns: 4em 1fr auto; padding: 14px 0; align-items: baseline; text-decoration: none; }
.resource-links span,.team-lines span { font-family: var(--mono); color: var(--faint); font-size: 10px; letter-spacing: .14em; }
.resource-links i { font-style: normal; color: var(--faint); }
.resource-links a:hover,.team-lines a:hover { padding-left: 8px; color: var(--accent); }
.team-lines { max-width: 720px; }
.team-lines a { display: grid; grid-template-columns: 10em 1fr auto; padding: 13px 0; align-items: baseline; text-decoration: none; }
.team-lines strong { font-weight: 500; }
.resource-actions { display: flex; flex-wrap: wrap; gap: 3em; margin-top: 4vh; }
.about-voices { width: min(76vw,980px); margin: 4vh auto 20vh; }
.about-voices > .coord-label { display: block; margin-bottom: 8vh; }
.about-voices article { width: min(48vw,650px); margin: 0 0 13vh; }
.about-voices article.push { margin-left: auto; }
.about-voices blockquote { font-family: var(--serif); font-size: clamp(18px,2vw,28px); line-height: 1.9; margin: 1.5vh 0 3vh; }
.about-voices audio { display: block; width: min(100%,420px); height: 34px; margin-bottom: 2vh; opacity: .72; }
.about-voices a { display: inline-block; }
.reading-filters{display:flex;gap:2.4em;margin-top:5vh}.reading-filters button{appearance:none;border:0;border-bottom:1px solid transparent;background:none;padding:5px 0;color:var(--faint);font-family:var(--mono);font-size:10px;letter-spacing:.13em;cursor:pointer}.reading-filters button.active{color:var(--ink);border-color:var(--ink)}
.reading-trace{width:min(84vw,1120px);margin:0 auto 16vh}.reading-trace article{display:grid;grid-template-columns:minmax(220px,36vw) minmax(260px,1fr);gap:7vw;align-items:end;margin-bottom:18vh}.reading-trace article.reverse{grid-template-columns:minmax(260px,1fr) minmax(220px,31vw)}.reading-trace article.reverse figure{grid-column:2}.reading-trace article.reverse div{grid-row:1;grid-column:1}.reading-trace figure img{display:block;width:100%;max-height:66vh;object-fit:cover}.reading-trace h2{font-family:var(--serif);font-size:clamp(22px,2.7vw,39px);font-weight:500;line-height:1.5;margin:2vh 0}.reading-trace article>div>p:not(.coord-label){line-height:2;margin-bottom:3vh}.reading-trace article a,.source-trace a{text-decoration:underline;text-underline-offset:4px}.reading-trace .text-only{display:block;width:min(52vw,680px);margin-left:8vw}.reading-trace .text-only.right{margin-left:auto;margin-right:6vw}
.source-trace{width:min(78vw,980px);margin:0 auto 18vh;position:relative}.source-trace::before{content:'';position:absolute;left:2.5em;top:12px;bottom:0;width:1px;background:linear-gradient(var(--line) 70%,transparent)}.source-trace section{display:grid;grid-template-columns:5em minmax(0,1fr);gap:4vw;margin-bottom:11vh;position:relative}.source-trace section>span{background:var(--bg);position:relative;z-index:1;padding:5px 0}.source-trace h2{font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.5vw,36px);margin-bottom:2vh}.source-trace p{line-height:2;margin-bottom:2vh}.source-trace details{border-top:1px solid var(--line);padding:12px 0;margin-top:2vh}.source-trace summary{cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--faint)}.source-trace .name-field{margin-top:2vh;font-size:13px;color:var(--faint)}
@media (max-width:900px) {
  .resource-head { padding: 8vh 24px 11vh; }
  .resource-chapter,.resource-chapter.offset { width: auto; margin: 0 24px 14vh; }
  .resource-images { grid-template-columns: 1fr 1fr; gap: 5vh 18px; }
  .resource-images figure:nth-child(2),.resource-images figure:nth-child(4) { padding-bottom: 0; }
  .resource-links a { grid-template-columns: 3em 1fr auto; }
  .team-lines a { grid-template-columns: 7.5em 1fr auto; }
  .about-voices { width: auto; margin: 4vh 24px 16vh; }
  .about-voices article,.about-voices article.push { width: auto; margin: 0 0 11vh; }
  .reading-filters{gap:1.3em;flex-wrap:wrap}.reading-trace{width:auto;margin:0 24px 14vh}.reading-trace article,.reading-trace article.reverse{display:block;margin-bottom:13vh}.reading-trace article.reverse figure,.reading-trace article.reverse div{grid-column:auto;grid-row:auto}.reading-trace article>div{margin-top:4vh}.reading-trace .text-only,.reading-trace .text-only.right{width:auto;margin:0 0 12vh}.source-trace{width:auto;margin:0 24px 14vh}.source-trace section{grid-template-columns:3.4em 1fr;gap:12px;margin-bottom:9vh}.source-trace::before{left:1.7em}
}
.cl a.pt-mark:hover, .cl a.pt-mark:focus-visible { opacity: 1 !important; }

/* ---------- 闪光星图：发光星形（按视觉优化规范） ----------
   核心点 + 径向光晕在 ::before，细十字光芒在 ::after；
   呼吸动画在星体（透明度+缩放），闪烁动画在光晕，互不覆盖；
   冷白/淡紫星光，等级4与✦用低饱和暖金 #FFD89A */

.cl a.pt-mark {
  width: 14px;
  height: 14px;
  padding: 0;
  font-size: 0;
  color: transparent;
  animation: none;
}
.cl a.pt-mark::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,255,255,.95) 0 1.2px,
    rgba(217,221,247,.5) 28%,
    rgba(191,198,246,.22) 52%,
    transparent 72%);
}
.cl a.pt-mark::after { content: none; }

/* 十字光芒：细、长、低透明，4 向 */
.cl a.pt-mark.lum-2::after, .cl a.pt-mark.lum-3::after, .cl a.pt-mark.lum-4::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(90deg, transparent, rgba(217,221,247,.55), transparent) center / 100% 1px no-repeat,
    linear-gradient(0deg, transparent, rgba(217,221,247,.55), transparent) center / 1px 100% no-repeat;
}

/* 尺寸阶梯 */
.cl a.pt-mark.lum-0::before { width: 5px;  height: 5px; }
.cl a.pt-mark.lum-1::before { width: 9px;  height: 9px; }
.cl a.pt-mark.lum-2::before { width: 14px; height: 14px; }
.cl a.pt-mark.lum-2::after  { width: 18px; height: 18px; }
.cl a.pt-mark.lum-3::before { width: 20px; height: 20px; }
.cl a.pt-mark.lum-3::after  { width: 30px; height: 30px; }
.cl a.pt-mark.lum-4::before { width: 26px; height: 26px; }
.cl a.pt-mark.lum-4::after  { width: 44px; height: 44px; }

/* 暖金特殊星（等级4 / ✦ / 那年今日） */
.cl a.pt-mark.gold::before {
  background: radial-gradient(circle,
    rgba(255,244,224,.95) 0 1.4px,
    rgba(255,216,154,.5) 30%,
    rgba(255,216,154,.18) 55%,
    transparent 75%);
}
.cl a.pt-mark.gold::after {
  background:
    linear-gradient(90deg, transparent, rgba(255,216,154,.5), transparent) center / 100% 1px no-repeat,
    linear-gradient(0deg, transparent, rgba(255,216,154,.5), transparent) center / 1px 100% no-repeat;
}

/* 静息透明度（波动基线） */
.cl a.pt-mark.lum-0 { opacity: .32; }
.cl a.pt-mark.lum-1 { opacity: .2;  animation: st-br-1 var(--br-dur, 6s) var(--br-del, 0s) ease-in-out infinite alternate; }
.cl a.pt-mark.lum-2 { opacity: .35; animation: st-br-2 var(--br-dur, 6s) var(--br-del, 0s) ease-in-out infinite alternate; }
.cl a.pt-mark.lum-3 { opacity: .5;  animation: st-br-3 var(--br-dur, 7s) var(--br-del, 0s) ease-in-out infinite alternate; }
.cl a.pt-mark.lum-4 { opacity: .65; animation: st-br-4 var(--br-dur, 8s) var(--br-del, 0s) ease-in-out infinite alternate; }

/* 呼吸：透明度 + 微缩放，各级波动区间不同 */
@keyframes st-br-1 { from { opacity: .10; transform: translate(-50%,-50%) scale(.94); } to { opacity: .30; transform: translate(-50%,-50%) scale(1.04); } }
@keyframes st-br-2 { from { opacity: .20; transform: translate(-50%,-50%) scale(.93); } to { opacity: .50; transform: translate(-50%,-50%) scale(1.06); } }
@keyframes st-br-3 { from { opacity: .30; transform: translate(-50%,-50%) scale(.92); } to { opacity: .70; transform: translate(-50%,-50%) scale(1.07); } }
@keyframes st-br-4 { from { opacity: .40; transform: translate(-50%,-50%) scale(.92); } to { opacity: .90; transform: translate(-50%,-50%) scale(1.08); } }

/* 闪烁：只作用于光晕，短促 0.3~1.2s，错峰随机 */
.cl a.pt-mark.lum-2::before,
.cl a.pt-mark.lum-3::before,
.cl a.pt-mark.lum-4::before {
  animation: st-tw var(--tw-dur, 5s) var(--tw-del, 0s) ease-in-out infinite;
}
@keyframes st-tw {
  0%, 88%, 100% { filter: brightness(1); opacity: 1; }
  92% { filter: brightness(1.35); opacity: 1.0; }
  95% { opacity: .55; }
}

/* 展开态：呼吸继续，整体基线提亮 */
.cl:hover a.pt-mark, .cl:focus-within a.pt-mark, .cl.focused a.pt-mark { animation-play-state: running; }
.cl:hover a.pt-mark.lum-0, .cl:focus-within a.pt-mark.lum-0, .cl.focused a.pt-mark.lum-0 { opacity: .6; }

/* 星云雾层：两三个极淡光斑，形成群落背后的层次 */
.map-field {
  background:
    radial-gradient(560px 300px at 38% 34%, rgba(191,198,246,.10), transparent 70%),
    radial-gradient(480px 260px at 70% 52%, rgba(217,221,247,.12), transparent 70%),
    radial-gradient(420px 240px at 16% 62%, rgba(191,198,246,.07), transparent 70%);
}

@media (prefers-reduced-motion: reduce) {
  .cl a.pt-mark, .cl a.pt-mark::before { animation: none !important; }
}

/* 展开态改为静态阶梯亮度：呼吸暂停，个体坐标清晰浮现（闪烁保留在光晕上） */
.cl:hover a.pt-mark, .cl:focus-within a.pt-mark, .cl.focused a.pt-mark { animation: none; }
.cl:hover a.pt-mark.lum-1, .cl:focus-within a.pt-mark.lum-1, .cl.focused a.pt-mark.lum-1 { opacity: .6; }
.cl:hover a.pt-mark.lum-2, .cl:focus-within a.pt-mark.lum-2, .cl.focused a.pt-mark.lum-2 { opacity: .75; }
.cl:hover a.pt-mark.lum-3, .cl:focus-within a.pt-mark.lum-3, .cl.focused a.pt-mark.lum-3 { opacity: .9; }
.cl:hover a.pt-mark.lum-4, .cl:focus-within a.pt-mark.lum-4, .cl.focused a.pt-mark.lum-4 { opacity: 1; }