/* writing.css — /writing posts, what's new, upcoming */

.wr-main{ padding:118px 56px 0; position:relative; z-index:5; }
.wr-head{ max-width:1000px; margin:0 auto; }
.wr-head .ttl{ font-size:15px; letter-spacing:.16em; color:var(--ink-dim); text-transform:lowercase; }
.wr-head .intro{ font-size:15px; line-height:1.68; color:var(--ink); max-width:720px; margin:16px 0 0; text-wrap:pretty; }
.wr-head .intro .em{ color:var(--gold-hi); }

.wr-wrap{ max-width:1000px; margin:24px auto 0; }
.filters{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.filters .flabel{ font-size:11px; letter-spacing:.1em; color:var(--faint); margin-right:4px; }
.fchip{ font-size:11px; letter-spacing:.04em; color:var(--ink-dim); cursor:pointer; font-family:inherit;
  border:1px solid var(--line-soft); border-radius:15px; padding:4px 13px; background:rgba(12,16,24,0.4);
  transition:all .2s var(--ease); }
.fchip:hover{ border-color:var(--gold-dim); color:var(--ink); }
.fchip.active{ border-color:var(--gold); color:var(--gold-hi); background:rgba(212,162,76,0.08); box-shadow:0 0 10px rgba(212,162,76,0.12); }

.wr-head .wr-note{ display:inline-block; margin-left:6px; font-size:12px; color:var(--faint); letter-spacing:.02em; }

/* controls row: axis filter + legend */
.wr-controls{ max-width:1000px; margin:22px auto 0; display:flex; justify-content:space-between;
  align-items:center; gap:16px; flex-wrap:wrap; }
.wr-legend{ display:flex; align-items:center; gap:18px; font-size:11px; color:var(--faint); letter-spacing:.04em; }
.wl{ display:inline-flex; align-items:center; gap:7px; }
.wl-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.wl-dot.shipped{ background:var(--gold); box-shadow:0 0 7px var(--gold-glow); }
.wl-dot.queued{ background:transparent; border:1px solid var(--line); }
.wr-scrub{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }

/* ── the horizontal timeline — only a portion shows; ends diffuminate ── */
.wr-timeline{ margin:22px 0 0; overflow-x:auto; overflow-y:hidden; cursor:grab;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; touch-action:pan-x;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%); }
.wr-timeline::-webkit-scrollbar{ display:none; }
.wr-timeline.dragging{ cursor:grabbing; }

.wr-track{ position:relative; display:flex; align-items:center; width:max-content; height:360px; padding:0 8vw; }
.wr-track::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px;
  background:linear-gradient(to right, transparent, var(--line) 4%, var(--line) 96%, transparent); }
/* a faint gold current travels the rail — the series as a living line (gated, low-alpha) */
.wr-track::after{ content:""; position:absolute; top:50%; transform:translateY(-50%); height:1px; width:200px;
  background:linear-gradient(to right, transparent, var(--gold-hi), transparent);
  filter:drop-shadow(0 0 5px var(--gold-glow)); opacity:0; pointer-events:none;
  animation:railCurrent 11s linear infinite; }
@keyframes railCurrent{ 0%{ left:-200px; opacity:0; } 8%{ opacity:.55; } 88%{ opacity:.55; } 100%{ left:100%; opacity:0; } }
@media (prefers-reduced-motion:reduce){ .wr-track::after{ animation:none; display:none; } }
html.reduced-motion .wr-track::after{ animation:none; display:none; }

.wr-post{ position:relative; flex:none; width:236px; height:100%; text-decoration:none; transition:opacity .3s var(--ease); }
.wr-post.dim{ opacity:.18; pointer-events:none; }

.wr-node{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:12px; height:12px;
  border-radius:50%; background:var(--bg); border:1.4px solid var(--line); z-index:3;
  transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
.wr-post.shipped .wr-node{ background:var(--gold); border-color:var(--gold-hi); box-shadow:0 0 9px var(--gold-glow); }
.wr-post.drafting .wr-node{ border-color:var(--gold); animation:nodePulse 2.4s var(--ease) infinite; }
.wr-post.hot .wr-node{ box-shadow:0 0 14px var(--gold-glow); transform:translate(-50%,-50%) scale(1.25); }

.wr-stem{ position:absolute; left:50%; transform:translateX(-50%); width:1px; background:var(--line-soft); z-index:2; }
.wr-post.up .wr-stem{ bottom:50%; height:58px; }
.wr-post.down .wr-stem{ top:50%; height:58px; }

/* .wr-card is a .surface-line (styles.css); this carries only its absolute placement */
.wr-card{ position:absolute; left:50%; transform:translateX(-50%); width:204px; padding:12px 13px; }
.wr-post.up .wr-card{ bottom:calc(50% + 58px); }
.wr-post.down .wr-card{ top:calc(50% + 58px); }
.wr-post.shipped:hover .wr-card{ border-color:var(--gold-dim); transform:translateX(-50%) translateY(-2px); }
.wr-post.hot .wr-card{ border-color:var(--gold-dim); }
.wr-card-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.wr-num{ font-size:11px; letter-spacing:.08em; color:var(--gold); }
.wr-state{ font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.wr-post.shipped .wr-state{ color:var(--gold-hi); }
.wr-state.draft{ color:var(--gold); }
.wr-title{ font-size:13.5px; line-height:1.32; color:var(--ink); }
.wr-ax{ font-size:10px; letter-spacing:.06em; color:var(--faint); margin-top:7px; }
.wr-hook{ display:none; font-size:12px; line-height:1.55; color:var(--ink-dim); margin-top:9px; }  /* desktop: hover→readout; mobile: inline */

/* foot: live readout + horizon notes */
.wr-foot{ max-width:1000px; margin:26px auto 0; display:flex; justify-content:space-between;
  align-items:center; gap:18px; flex-wrap:wrap; border-top:1px solid var(--line-soft); padding-top:16px; }
.wr-readout{ font-size:13px; line-height:1.5; color:var(--ink-dim); max-width:640px; min-height:20px; }
.wr-readout b{ color:var(--gold); }
.wr-eventually{ display:flex; gap:20px; flex-wrap:wrap; }
.wr-eventually .evt{ font-size:12px; color:var(--faint); }
.wr-eventually .evt b{ color:var(--ink-dim); font-weight:400; }

@media (max-width:760px){
  .wr-main{ padding:64px 18px 0; }
  .wr-controls{ flex-direction:column; align-items:flex-start; }
  /* ── the timeline becomes a vertical, tappable list: native scroll, hooks inline, no hover ── */
  .wr-timeline{ overflow:visible; cursor:default; touch-action:auto; margin-top:18px;
    -webkit-mask-image:none; mask-image:none; }
  .wr-track{ display:flex; flex-direction:column; align-items:stretch; gap:12px;
    width:auto; height:auto; padding:0; }
  .wr-track::before, .wr-track::after{ display:none; }     /* kill the rail line + travelling current */
  .wr-post{ width:100%; height:auto; }
  .wr-post.dim{ display:none; }                            /* axis filter hides off-axis (list compacts) */
  .wr-stem, .wr-node{ display:none; }
  .wr-card,
  .wr-post.up .wr-card, .wr-post.down .wr-card{ position:static; transform:none; width:auto;
    bottom:auto; top:auto; padding:14px 15px; }
  .wr-post.shipped:active .wr-card{ border-color:var(--gold-dim); }
  .wr-hook{ display:block; }
  .wr-scrub, .wr-readout{ display:none; }                  /* hooks are inline now */
  .wr-foot{ flex-direction:column; align-items:flex-start; }
}