/* 旅途坐标 — a polar coordinate chart paired with a linked list, not a photo grid */
/* no decorative glow here (unlike the other two archive pages): this section's height
   swings wildly depending on the map, so any position for it — percentage or fixed —
   either hides fully behind the opaque map or peeks out as a stray patch behind the
   toolbar. The map is already the page's visual interest; flat background is correct. */
.coord-content{min-height:620px;padding:56px clamp(24px,4vw,70px) 90px;background-color:var(--deep);color:var(--pale)}

.coord-tools{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-bottom:40px}
.coord-status{display:flex;gap:8px}
.coord-status button{padding:7px 15px;border:1px solid rgba(225,217,199,.28);background:transparent;color:inherit;cursor:pointer;font-size:11px;letter-spacing:.1em;transition:.3s}
.coord-status button:hover,.coord-status button.active{background:var(--rust);border-color:var(--rust);color:var(--pale)}
.coord-tags{display:flex;flex-wrap:wrap;gap:6px 16px;margin-right:auto}
.coord-tags button{padding:2px 0;border:0;background:none;color:inherit;cursor:pointer;font-size:11.5px;letter-spacing:.1em;opacity:.55;transition:opacity .3s}
.coord-tags button:hover{opacity:.85}
.coord-tags button.active{opacity:1;color:var(--paper);text-decoration:underline;text-underline-offset:4px}
.coord-search{position:relative;width:170px;border-bottom:1px solid rgba(225,217,199,.32)}
.coord-search input{width:100%;padding:6px 4px;border:0;outline:0;background:transparent;color:var(--pale);font-size:12px}
.coord-search input::placeholder{color:rgba(225,217,199,.45)}
.coord-reset{display:inline-flex;align-items:center;gap:6px;padding:7px 15px;border:1px solid rgba(225,217,199,.28);background:transparent;color:inherit;cursor:pointer;font-size:11px;letter-spacing:.1em;transition:.3s}
.coord-reset:hover{border-color:var(--rust);color:var(--pale)}
.coord-reset svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.coord-layout{display:flex;flex-direction:column;gap:40px}

/* the map is the centerpiece of this page — break out of the content column and run edge-to-edge,
   with real breathing room above/below so it reads as a composed section, not a slab dropped in place */
.coord-chart-wrap{width:100vw;margin:48px 0 0;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.coord-map{position:relative;width:100%}
.coord-map-img{display:block;width:100%;height:auto}
.coord-pins{position:absolute;inset:0}
.coord-chart-caption{margin:18px 0 0;padding:0 clamp(24px,4vw,70px);font:9.5px var(--latin);letter-spacing:.06em;line-height:1.7;opacity:.4}

.continent-cluster{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;border-radius:50%;border:2px solid rgba(225,217,199,.35);background:var(--rust);color:var(--pale);font:600 15px var(--latin);box-shadow:0 6px 16px rgba(10,13,11,.5);cursor:pointer;transition:transform .25s}
.continent-cluster:hover,.continent-cluster:focus-visible{transform:translate(-50%,-50%) scale(1.06)}
.continent-cluster small{display:block;margin-top:1px;font-size:9px;font-weight:400;letter-spacing:.06em;opacity:.85}

.map-pin{position:absolute;transform:translate(-50%,-100%);border:0;padding:8px 8px 2px;margin:-8px -8px 0;background:none;cursor:pointer}
.map-pin-head{display:block;width:18px;height:18px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--rust);box-shadow:0 3px 7px rgba(10,13,11,.5);transition:transform .25s,background .25s}
.map-pin.wish .map-pin-head{background:rgba(225,217,199,.12);border:1.5px dashed var(--pale)}
.map-pin.active .map-pin-head,.map-pin:hover .map-pin-head,.map-pin:focus-visible .map-pin-head{transform:rotate(-45deg) scale(1.25)}
.map-pin.active .map-pin-head{background:var(--paper)}
.map-pin.wish.active .map-pin-head{background:var(--paper);border-color:var(--paper)}
.map-pin-label{position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);white-space:nowrap;padding:3px 8px;background:rgba(20,24,21,.82);color:var(--pale);font-size:9.5px;letter-spacing:.05em;opacity:0;pointer-events:none;transition:opacity .25s}
.map-pin.active .map-pin-label,.map-pin:hover .map-pin-label,.map-pin:focus-visible .map-pin-label{opacity:1}

.coord-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.coord-card{display:flex;flex-direction:column;padding:0;background:var(--paper);color:var(--ink);border:1px solid rgba(225,217,199,.1);cursor:pointer;overflow:hidden;transition:transform .3s,box-shadow .3s,outline-color .3s;outline:1px solid transparent;animation:cardIn .55s ease both}
.coord-card:hover,.coord-card.active{transform:translateY(-3px);box-shadow:0 14px 26px rgba(15,19,16,.22)}
.coord-card.active{outline-color:var(--rust)}
.coord-thumb{position:relative;height:96px;flex:none;background:linear-gradient(155deg,#5b6459,#8a463e 140%)}
.coord-card:nth-child(3n+2) .coord-thumb{background:linear-gradient(155deg,#4a5850,#626a63 140%)}
.coord-card:nth-child(3n) .coord-thumb{background:linear-gradient(155deg,#3d4a42,#556158 140%)}
.coord-thumb svg{position:absolute;inset:0;margin:auto;width:24px;height:24px;stroke:rgba(225,217,199,.85);fill:none;stroke-width:1.2}
.coord-status-badge{position:absolute;left:0;top:0;padding:3px 7px;font:8.5px var(--latin);letter-spacing:.08em;background:rgba(20,24,21,.62);color:var(--pale)}
.coord-body{min-width:0;padding:16px 18px 18px}
.coord-id{margin:0 0 6px;font:9.5px var(--latin);letter-spacing:.24em;color:var(--rust)}
.coord-card h2{margin:0 0 5px;font-size:18px;font-weight:500;letter-spacing:.03em}
.coord-meta{margin:0 0 9px;font-size:10px;letter-spacing:.1em;opacity:.55}
.coord-excerpt{margin:0 0 11px;font-size:12.5px;line-height:1.75;opacity:.82}
.coord-tags-row{display:flex;flex-wrap:wrap;gap:6px}
.coord-tags-row span{font-size:9px;padding:3px 7px;border:1px solid rgba(34,37,33,.25)}
.coord-empty{grid-column:1/-1;padding:60px 20px;text-align:center;border:1px solid rgba(225,217,199,.18);opacity:.6}

@media(max-width:620px){
  .coord-content{padding:40px 20px 65px}
  .coord-tools{flex-direction:column;align-items:stretch}
  .coord-search{width:100%}
  .coord-list{grid-template-columns:1fr}
}