/* ===================================================================
   Digital Futurist — single timeline entry redesign.
   Built entirely on the --df-* tokens from homepage-redesign.css (loaded
   first as a dependency) so entries stay in lockstep with the homepage
   and timeline page instead of carrying their own palette.
   =================================================================== */

.df-entry-page { max-width:820px; margin:0 auto; padding:26px 24px 56px; }

/* ---- decade scrubber: compact "you are here" against the real timeline ---- */
.df-entry-scrubber-wrap { margin-bottom:2rem; }
.df-entry-scrubber { position:relative; display:flex; height:52px; }
.df-entry-scrubber::before {
  content:''; position:absolute; left:0; right:0; top:42px; height:1px;
  background:var(--df-border);
}
.df-entry-tick { flex:1; position:relative; height:100%; text-decoration:none; }
.df-entry-tick-label {
  position:absolute; top:0; left:0; right:0; text-align:center;
  font-family:'IBM Plex Mono', monospace; font-size:.78rem; letter-spacing:.04em;
  color:var(--df-muted); transition:color .15s ease;
}
.df-entry-tick:hover .df-entry-tick-label { color:var(--df-text); }
.df-entry-tick::after {
  content:''; position:absolute; top:42px; left:50%; transform:translate(-50%,-50%);
  width:5px; height:5px; border-radius:50%; background:var(--df-node-ring);
}
.df-entry-tick.is-now .df-entry-tick-label { color:var(--df-accent); font-weight:600; }
.df-entry-tick.is-now:hover .df-entry-tick-label { color:var(--df-accent); }
.df-entry-tick.is-now::after {
  width:8px; height:8px; background:var(--df-accent); box-shadow:0 0 8px var(--df-accent-glow);
}
.df-entry-pointer {
  position:absolute; top:28px; transform:translateX(-50%);
  width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:10px solid var(--df-accent);
}
.df-shell .df-entry-view-timeline {
  display:flex; justify-content:flex-end; margin-top:.6rem;
  font-family:'IBM Plex Mono', monospace; font-size:.72rem; letter-spacing:.04em;
  color:var(--df-accent); text-decoration:none;
}
.df-entry-view-timeline:hover { text-decoration:underline; }

/* ---- dateline / log line ---- */
.df-entry-log {
  display:flex; align-items:center; gap:.6rem;
  font-family:'IBM Plex Mono', monospace; font-size:.76rem; letter-spacing:.04em;
  color:var(--df-muted); margin-bottom:.9rem;
}
.df-entry-log .df-blip {
  width:7px; height:7px; border-radius:50%; background:var(--df-accent);
  box-shadow:0 0 6px var(--df-accent-glow); flex-shrink:0;
}

/* ---- headline ---- */
.df-entry-title {
  font-size:2.1rem; line-height:1.18; font-weight:700; letter-spacing:-.01em;
  margin:0 0 1.8rem; color:var(--df-text); text-wrap:balance;
  border-left:3px solid var(--df-accent); padding-left:1rem;
}

/* ---- body + media layout ---- */
.df-entry-layout { display:grid; grid-template-columns:1fr 300px; gap:2.2rem; align-items:start; }
.df-entry-layout.df-entry-full { grid-template-columns:1fr; }

.df-entry-body { font-size:1rem; line-height:1.7; color:var(--df-text2); }
.df-entry-body p { margin:0 0 1.1rem; max-width:62ch; }
.df-entry-body a { color:var(--df-accent); text-underline-offset:2px; }
.df-entry-body blockquote {
  margin:1.5rem 0; padding:.9rem 1.1rem; background:var(--df-panel);
  border:1px solid var(--df-border); border-left:2px solid var(--df-accent);
  border-radius:0 4px 4px 0; font-style:italic; color:var(--df-text2);
}
.df-entry-body blockquote p { margin:0; }

.df-entry-media { display:flex; flex-direction:column; gap:1.2rem; }
.df-entry-figure {
  margin:0; border:1px solid var(--df-border); background:var(--df-panel);
  padding:.5rem; border-radius:4px;
}
.df-entry-figure a { display:block; position:relative; cursor:zoom-in; }
.df-entry-figure a::after {
  content:"⤢ enlarge"; position:absolute; right:.5rem; bottom:.5rem;
  background:rgba(0,0,0,.65); color:#fff; font-family:'IBM Plex Mono', monospace;
  font-size:.6rem; letter-spacing:.04em; padding:.2rem .45rem; border-radius:3px;
  opacity:0; transition:opacity .15s ease;
}
.df-entry-figure a:hover::after, .df-entry-figure a:focus-visible::after { opacity:1; }
.df-entry-figure img { width:100%; display:block; border-radius:2px; }
.df-entry-figure figcaption {
  font-family:'IBM Plex Mono', monospace; font-size:.68rem; letter-spacing:.03em;
  color:var(--df-muted); margin-top:.5rem;
}

/* the file link itself uses the shared .df-file-pill component (homepage-redesign.css) */
.df-entry-file .wp-caption-text, .df-entry-file .wp-description-text { font-size:.78rem; color:var(--df-muted); margin:.4rem 0 0; }

/* ---- entry image lightbox: same in-page overlay pattern as the Photos
   collection lightbox (.df-photo-lb in photo-collection.css), duplicated
   here under its own class names rather than shared, since this
   stylesheet and that one are never both the "active" one on the same
   page load - see single.php for the 2026-08-10 context (this replaces
   a target="_blank" new-tab open). ---- */
.df-entry-lb {
  position:fixed; inset:0; z-index:200; display:none;
  background:rgba(0,0,0,.88); align-items:center; justify-content:center;
  padding:40px;
}
.df-entry-lb.is-open { display:flex; }
.df-entry-lb-figure { max-width:min(92vw, 1100px); max-height:86vh; display:flex; flex-direction:column; align-items:center; gap:14px; }
.df-entry-lb-img { max-width:100%; max-height:74vh; object-fit:contain; border-radius:2px; }
.df-entry-lb-cap {
  font-family:'IBM Plex Mono', monospace; font-size:.8rem; line-height:1.6;
  color:#e9e8e4; text-align:center; max-width:64ch;
}
.df-entry-lb-close, .df-entry-lb-prev, .df-entry-lb-next {
  position:absolute; background:transparent; border:1px solid rgba(255,255,255,.25); color:#e9e8e4;
  border-radius:999px; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; cursor:pointer; line-height:1;
}
.df-entry-lb-close:hover, .df-entry-lb-prev:hover, .df-entry-lb-next:hover { border-color:var(--df-accent); color:var(--df-accent); }
.df-entry-lb-close { top:22px; right:22px; }
.df-entry-lb-prev { left:22px; top:50%; transform:translateY(-50%); }
.df-entry-lb-next { right:22px; top:50%; transform:translateY(-50%); }
/* primary "back to story" affordance, right under the image - see
   single.php, 2026-08-10: the corner close button alone read as too far
   from what you're actually looking at. */
.df-entry-lb-back {
  font-family:'IBM Plex Mono', monospace; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:#e9e8e4; background:transparent; border:1px solid rgba(255,255,255,.25); border-radius:999px;
  padding:8px 16px; cursor:pointer;
}
.df-entry-lb-back:hover { border-color:var(--df-accent); color:var(--df-accent); }
@media (max-width:640px) {
  .df-entry-lb { padding:16px; }
  .df-entry-lb-prev, .df-entry-lb-next { width:38px; height:38px; }
}

/* ---- related entries ---- */
.df-entry-related { margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid var(--df-border); }
.df-entry-related h5 {
  font-family:'IBM Plex Mono', monospace; font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--df-muted); font-weight:500; margin:0 0 1rem;
}
.df-entry-related-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:.9rem; }
.df-entry-related-card {
  display:flex; align-items:center; gap:.9rem; text-decoration:none;
  background:var(--df-panel); border:1px solid var(--df-border); border-radius:6px;
  padding:.8rem; transition:border-color .15s ease;
}
.df-entry-related-card:hover { border-color:var(--df-accent); }
.df-entry-related-card img { width:64px; height:64px; object-fit:cover; border-radius:4px; flex-shrink:0; }
.df-entry-related-card span { color:var(--df-text); font-size:.9rem; line-height:1.35; }
.df-entry-related-empty { color:var(--df-muted); font-size:.85rem; font-style:italic; }

/* ---- prev/next entry navigation ---- */
.df-entry-nav {
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
  margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid var(--df-border);
}
.df-entry-nav-link {
  display:flex; flex-direction:column; gap:.35rem; text-decoration:none;
  padding:.9rem 1rem; border:1px solid var(--df-border); border-radius:6px;
  transition:border-color .15s ease; min-width:0;
}
.df-entry-nav-link:hover { border-color:var(--df-accent); }
.df-entry-nav-link.is-empty { border-color:transparent; }
.df-entry-nav-link.is-next { text-align:right; align-items:flex-end; }
.df-shell .df-entry-nav-label {
  font-family:IBM Plex Mono, monospace; font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--df-accent);
}
.df-entry-nav-title {
  color:var(--df-text); font-size:.92rem; line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:normal;
}

@media (max-width:720px) {
  .df-entry-layout { grid-template-columns:1fr; }
  .df-entry-scrubber-wrap { overflow-x:auto; }
  .df-entry-nav { grid-template-columns:1fr; }
  .df-entry-nav-link.is-next { text-align:left; align-items:flex-start; }
}