/* Hải's Cyberspace — Blade Runner theme: rain-soaked neon Los Angeles, 2049 */

/* JetBrains Mono, split into the same per-script subsets Google Fonts serves,
   so the browser only downloads what a given page actually needs. The
   "vietnamese" subset carries the precomposed tone-marked vowels (ắ, ầ, ộ,
   ...) and đ/Đ that a display-only face like Share Tech Mono lacks — without
   it, Vietnamese text would silently fall back to a different font per
   glyph. */
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/JetBrainsMono-vietnamese.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/JetBrainsMono-latin-ext.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/JetBrainsMono-latin.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #05040c;
  --panel: rgba(12, 9, 28, 0.78);
  --panel-solid: #0c091c;
  --pink: #ff2a6d;
  --pink-glow: rgba(255, 42, 109, 0.55);
  --cyan: #05d9e8;
  --cyan-glow: rgba(5, 217, 232, 0.45);
  --amber: #ff9f43;
  --amber-glow: rgba(255, 159, 67, 0.45);
  --violet: #7b2cbf;
  --line: rgba(5, 217, 232, 0.28);
  --text: #e4e0ff;
  --text-dim: #8d86b5;
  --danger: #ff2a6d;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
}

body {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

::selection { background: var(--pink); color: #fff; }

a { color: var(--cyan); text-decoration: none; transition: color 0.15s, text-shadow 0.15s; }
a:hover { color: var(--pink); text-shadow: 0 0 8px var(--pink-glow); }

/* ==========================================================================
   Backdrop scene (all fixed, behind content)
   ========================================================================== */

.scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* Night sky fading into the smoggy orange glow of 2049 LA on the horizon. */
.sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 45% at 75% 100%, rgba(255, 120, 40, 0.38), transparent 70%),
    radial-gradient(ellipse 60% 35% at 15% 100%, rgba(123, 44, 191, 0.35), transparent 70%),
    linear-gradient(to bottom, #03030a 0%, #0a0820 45%, #1d0f2e 75%, #3a1a2a 100%);
}

#city, #rain { position: absolute; inset: 0; width: 100%; height: 100%; }
#rain { opacity: 0.9; }

/* Sweeping searchlights. */
.beam {
  position: absolute;
  bottom: 0;
  width: 14vw;
  height: 130vh;
  transform-origin: 50% 100%;
  background: linear-gradient(to top, rgba(200, 220, 255, 0.13), rgba(200, 220, 255, 0) 85%);
  clip-path: polygon(46% 100%, 54% 100%, 100% 0, 0 0);
  filter: blur(6px);
}
.beam-left  { left: 18%; animation: sweep 14s ease-in-out infinite alternate; }
.beam-right { left: 62%; animation: sweep 18s ease-in-out infinite alternate-reverse; }
@keyframes sweep {
  from { transform: rotate(-28deg); }
  to   { transform: rotate(22deg); }
}

/* Spinners (flying police cars) drifting across the sky. */
.spinner {
  position: absolute;
  left: -120px;
  width: 46px;
  height: 9px;
  border-radius: 50% 60% 40% 40%;
  background: #0d0a18;
  box-shadow: 0 0 12px rgba(5, 217, 232, 0.35);
  animation: fly 38s linear infinite;
}
.spinner::after { /* headlight beam */
  content: "";
  position: absolute;
  right: -70px; top: 1px;
  width: 70px; height: 7px;
  background: linear-gradient(to right, rgba(255, 255, 230, 0.5), transparent);
  clip-path: polygon(0 35%, 100% 0, 100% 100%, 0 65%);
}
.spinner-light {
  position: absolute; top: -3px; left: 18px;
  width: 6px; height: 4px; border-radius: 2px;
  animation: siren 0.8s steps(1) infinite;
}
.spinner-1 { top: 22%; }
.spinner-2 { top: 34%; animation-duration: 55s; animation-delay: -30s; transform: scale(0.6); }
@keyframes fly {
  0%   { left: -120px; margin-top: 0; }
  50%  { margin-top: -18px; }
  100% { left: calc(100% + 120px); margin-top: 6px; }
}
@keyframes siren {
  0%   { background: #ff2a6d; box-shadow: 0 0 10px 3px #ff2a6d; }
  50%  { background: #05d9e8; box-shadow: 0 0 10px 3px #05d9e8; }
}

/* Vertical neon kanji/katakana signage on the edges of the viewport. */
.neon-sign {
  position: absolute;
  top: 12vh;
  writing-mode: vertical-rl;
  font-size: 1.6rem;
  letter-spacing: 0.35em;
  padding: 1rem 0.4rem;
  border: 2px solid currentColor;
  border-radius: 6px;
  opacity: 0.85;
}
.neon-sign-right {
  right: 2.2vw;
  color: #ffd6e6;
  text-shadow: 0 0 4px #fff, 0 0 12px var(--pink), 0 0 28px var(--pink);
  box-shadow: 0 0 14px var(--pink-glow), inset 0 0 14px var(--pink-glow);
  animation: neon-flicker 7s infinite;
}
.neon-sign-left {
  left: 2.2vw;
  top: 30vh;
  font-size: 1.25rem;
  color: #d6fbff;
  text-shadow: 0 0 4px #fff, 0 0 12px var(--cyan), 0 0 28px var(--cyan);
  box-shadow: 0 0 14px var(--cyan-glow), inset 0 0 14px var(--cyan-glow);
  animation: neon-flicker 11s infinite 2s;
}
@media (max-width: 1200px) { .neon-sign { display: none; } }

/* Atmospheric haze + vignette over the scene, under the content. */
.haze {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(255, 110, 50, 0.10), transparent 40%),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.65) 100%);
}

/* Lightning: briefly washes the whole scene in cold light. */
body.lightning .scene::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(190, 210, 255, 0.35);
  animation: lightning 0.45s ease-out;
}
@keyframes lightning {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  20%  { opacity: 0.2; }
  30%  { opacity: 0.9; }
  100% { opacity: 0; }
}

/* ==========================================================================
   Neon typography
   ========================================================================== */

@keyframes neon-flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.35; }
}
@keyframes letter-flicker {
  0%, 40%, 44%, 46%, 80%, 100% { opacity: 1; }
  42%, 45%, 82% { opacity: 0.1; }
}

.neon-pink {
  color: #ffe3ee;
  text-shadow: 0 0 2px #fff, 0 0 8px var(--pink), 0 0 18px var(--pink), 0 0 36px var(--pink);
}
.neon-cyan {
  color: #e0fdff;
  text-shadow: 0 0 2px #fff, 0 0 8px var(--cyan), 0 0 18px var(--cyan), 0 0 36px var(--cyan);
}
.flicker { animation: letter-flicker 4.5s infinite; }

.cursor { animation: blink 1s steps(1) infinite; color: var(--pink); }
@keyframes blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .beam, .spinner, .spinner-light, .neon-sign, .flicker, .cursor, .neon-title { animation: none; }
  .spinner { display: none; }
}

/* ==========================================================================
   Page chrome
   ========================================================================== */

.site-header, .site-main, .site-footer { position: relative; z-index: 2; }

.site-header {
  border-bottom: 1px solid var(--line);
  background: linear-gradient(to bottom, rgba(5, 4, 12, 0.92), rgba(5, 4, 12, 0.55));
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 0 rgba(255, 42, 109, 0.25), 0 8px 30px rgba(0, 0, 0, 0.5);
}

.site-header-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 1.25rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.brand { font-size: 1.6rem; letter-spacing: 0.04em; }
.brand:hover { text-shadow: none; }
.neon-title { animation: neon-flicker 9s infinite 1s; }
.neon-title:hover .neon-pink, .neon-title:hover .neon-cyan { filter: brightness(1.25); }

.brand-admin {
  font-size: 1.1rem;
  color: var(--amber);
  text-shadow: 0 0 10px var(--amber-glow);
  letter-spacing: 0.12em;
}
.brand-admin:hover { color: var(--amber); text-shadow: 0 0 16px var(--amber); }
.brand-sep { color: var(--pink); }

.tagline {
  margin: 0;
  color: var(--amber);
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-shadow: 0 0 10px var(--amber-glow);
}

.nav { display: flex; gap: 1.25rem; align-items: center; letter-spacing: 0.1em; font-size: 0.85rem; }
.nav a { color: var(--text); border-bottom: 1px solid transparent; padding-bottom: 2px; }
.nav a:hover { color: var(--cyan); border-color: var(--cyan); text-shadow: 0 0 8px var(--cyan-glow); }

.link-button {
  background: none; border: none; color: var(--text);
  font: inherit; letter-spacing: inherit; cursor: pointer; padding: 0;
}
.link-button:hover { color: var(--pink); text-shadow: 0 0 8px var(--pink-glow); }
.inline-form { display: inline; }

.site-main {
  flex: 1;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
}

.site-footer {
  text-align: center;
  padding: 2rem 1.5rem;
  color: var(--text-dim);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  background: linear-gradient(to top, rgba(5, 4, 12, 0.9), rgba(5, 4, 12, 0.4));
  border-top: 1px solid var(--line);
}
.site-footer p { margin: 0.3rem 0; }
.footer-quote {
  font-style: italic;
  color: #b9c7ff;
  font-size: 0.85rem;
  text-shadow: 0 0 8px rgba(120, 160, 255, 0.4);
}

/* ==========================================================================
   Panels & posts
   ========================================================================== */

.post-list { display: flex; flex-direction: column; gap: 2rem; }

.post-card, .login-box, .editor-page, .admin-list, .post-detail {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 1.75rem;
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
/* Neon tube running along the top edge of every panel. */
.post-card::before, .login-box::before, .editor-page::before, .admin-list::before, .post-detail::before {
  content: "";
  position: absolute;
  left: -1px; right: -1px; top: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--pink), var(--violet) 50%, var(--cyan));
  box-shadow: 0 0 10px var(--pink-glow), 0 0 18px var(--cyan-glow);
}
.post-card:hover {
  border-color: rgba(255, 42, 109, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 0 24px var(--pink-glow), 0 14px 50px rgba(0, 0, 0, 0.6);
}

.post-card-title { margin: 0 0 0.35rem; font-size: 1.35rem; }
.post-card-title a { color: #fff; text-shadow: 0 0 10px var(--cyan-glow); }
.post-card-title a:hover { color: var(--cyan); text-shadow: 0 0 14px var(--cyan); }
.post-card-meta {
  color: var(--amber);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.read-more {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  color: var(--pink);
  text-shadow: 0 0 8px var(--pink-glow);
}
.read-more:hover { color: #fff; text-shadow: 0 0 6px #fff, 0 0 14px var(--pink); }

/* The card shows the post's real (sanitized) HTML — headings, paragraphs,
   images, etc. — clipped to a fixed height with a fade-out at the bottom,
   rather than a plain-text excerpt. This lets an image near the top of a
   post show up in its card if there's room, and reveals more content
   overall than a short text snippet would. */
.post-card-preview {
  position: relative;
  max-height: 30rem;
  overflow: hidden;
  margin: 0 0 0.75rem;
}
.post-card-preview::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4rem;
  background: linear-gradient(to bottom, rgba(12, 9, 28, 0), rgba(12, 9, 28, 0.96));
  pointer-events: none;
}

.post-detail-title {
  margin-top: 0;
  font-size: 2rem;
  color: #fff;
  text-shadow: 0 0 2px #fff, 0 0 14px var(--pink), 0 0 30px var(--pink-glow);
}
.post-body { line-height: 1.75; margin: 1.5rem 0; }
.post-body h1, .post-body h2, .post-body h3 { color: var(--cyan); text-shadow: 0 0 10px var(--cyan-glow); }
.post-body img {
  max-width: 100%;
  border: 1px solid var(--line);
  box-shadow: 0 0 20px rgba(5, 217, 232, 0.15);
  cursor: zoom-in;
  transition: box-shadow 0.15s ease;
}
.post-body img:hover { box-shadow: 0 0 24px var(--cyan-glow); }
.post-body pre {
  background: rgba(0, 0, 0, 0.55); border: 1px solid var(--line);
  padding: 0.75rem; overflow-x: auto; border-radius: 2px; color: var(--cyan);
}
.post-body blockquote {
  border-left: 3px solid var(--pink);
  margin: 0; padding-left: 1rem; color: var(--text-dim);
  box-shadow: -6px 0 12px -6px var(--pink-glow);
}
.post-body a { border-bottom: 1px dotted var(--cyan); }

.empty-state { color: var(--text-dim); text-align: center; padding: 3rem 0; letter-spacing: 0.1em; }

/* ==========================================================================
   Reactions
   ========================================================================== */

.reaction-bar { display: flex; gap: 0.75rem; margin-top: 0.75rem; }
.reaction-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 0.4rem 0.8rem;
  border-radius: 2px;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.1s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.reaction-btn:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 12px var(--cyan-glow);
  transform: translateY(-1px);
}
.reaction-btn.active {
  border-color: var(--pink);
  color: #fff;
  box-shadow: 0 0 12px var(--pink-glow), inset 0 0 10px rgba(255, 42, 109, 0.25);
  animation: pulse 0.4s ease;
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.reaction-btn .count { font-size: 0.85rem; }

/* Read-only reaction counts, shown on the post-list cards. Reacting is only
   available from the post detail page (see .reaction-bar above). */
.reaction-counts { display: flex; gap: 1rem; margin-top: 0.75rem; color: var(--text-dim); }
.reaction-count-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.reaction-count-item .count { font-size: 0.85rem; }

/* Emoji glyphs (💚 ⚡ 🤖) don't share the same internal metrics — each one is
   drawn by the OS's color-emoji font with its own vertical offset/size, so
   sizing them with plain font-size/line-height leaves the row looking
   unaligned even though the surrounding markup is identical. Give every
   icon the same fixed box and center the glyph inside it, so all three sit
   on the same line regardless of how any one glyph is drawn. */
.reaction-btn .icon,
.reaction-count-item .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3em;
  height: 1.3em;
  font-size: 1.1em;
  line-height: 1;
}

/* ==========================================================================
   Pager
   ========================================================================== */

.pager {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 2.5rem; color: var(--text-dim); letter-spacing: 0.15em; font-size: 0.8rem;
}
.pager-link {
  color: var(--cyan);
  border: 1px solid var(--line);
  padding: 0.4rem 0.9rem;
  background: rgba(0, 0, 0, 0.4);
}
.pager-link:hover { border-color: var(--pink); }
.pager-link.disabled { color: var(--text-dim); pointer-events: none; opacity: 0.35; }

/* ==========================================================================
   Forms & buttons
   ========================================================================== */

.stack-form { display: flex; flex-direction: column; gap: 0.5rem; max-width: 640px; }
.stack-form label {
  color: var(--amber); font-size: 0.75rem; letter-spacing: 0.2em;
  margin-top: 0.75rem;
}
.stack-form input[type="text"],
.stack-form input[type="password"] {
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 0.65rem 0.8rem;
  font-family: inherit;
  border-radius: 2px;
}
.stack-form input:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 10px var(--cyan-glow);
}

.btn-primary {
  display: inline-block;
  align-self: flex-start;
  margin-top: 1rem;
  background: transparent;
  border: 1px solid var(--pink);
  color: var(--pink);
  padding: 0.6rem 1.3rem;
  border-radius: 2px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.15em;
  text-shadow: 0 0 8px var(--pink-glow);
  box-shadow: 0 0 10px rgba(255, 42, 109, 0.2), inset 0 0 10px rgba(255, 42, 109, 0.1);
  transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.btn-primary:hover {
  background: var(--pink);
  color: #fff;
  text-shadow: 0 0 4px #fff;
  box-shadow: 0 0 22px var(--pink-glow);
}

.error-msg {
  color: var(--danger);
  border: 1px solid var(--danger);
  padding: 0.5rem 0.75rem;
  border-radius: 2px;
  background: rgba(255, 42, 109, 0.08);
}

.login-box { max-width: 420px; margin: 3rem auto; text-align: left; }
.login-box h1 {
  text-align: center;
  font-size: 1.25rem;
  letter-spacing: 0.2em;
  color: var(--amber);
  text-shadow: 0 0 12px var(--amber-glow);
}

/* ==========================================================================
   Admin
   ========================================================================== */

.admin-list-header {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem;
}
.admin-list-header h1, .editor-page h1 { margin: 0; color: var(--cyan); letter-spacing: 0.15em; text-shadow: 0 0 10px var(--cyan-glow); }
.admin-list-header .btn-primary { margin-top: 0; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td {
  border-bottom: 1px solid var(--line);
  padding: 0.65rem 0.5rem;
  text-align: left;
  vertical-align: middle;
}
.admin-table th { color: var(--amber); font-weight: normal; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.15em; }
.admin-table tbody tr:hover { background: rgba(5, 217, 232, 0.05); }
.admin-table tr.row-hidden { opacity: 0.5; }
.col-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.badge {
  font-size: 0.65rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 0.05rem 0.45rem;
  margin-left: 0.5rem;
  letter-spacing: 0.1em;
}
.badge-hidden { color: var(--pink); box-shadow: 0 0 8px var(--pink-glow); }

.btn-mini {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 0.25rem 0.6rem;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  border-radius: 2px;
  cursor: pointer;
  font-family: inherit;
}
.btn-mini:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 8px var(--cyan-glow); }
.btn-danger:hover { border-color: var(--danger); color: var(--danger); box-shadow: 0 0 8px var(--pink-glow); }

/* Quill overrides */
.quill-editor { min-height: 300px; }
.ql-toolbar.ql-snow, .ql-container.ql-snow {
  border-color: var(--line) !important;
  background: rgba(0, 0, 0, 0.5);
}
.ql-snow .ql-stroke { stroke: var(--text) !important; }
.ql-snow .ql-fill { fill: var(--text) !important; }
.ql-snow .ql-picker { color: var(--text) !important; }
.ql-snow .ql-picker-options { background: var(--panel-solid) !important; }
.ql-editor { color: var(--text); min-height: 280px; }
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke { stroke: var(--cyan) !important; }

@media (max-width: 600px) {
  .site-header-inner { flex-direction: column; align-items: flex-start; }
  .admin-list-header { flex-direction: column; align-items: flex-start; }
  .brand { font-size: 1.3rem; }
  .post-detail-title { font-size: 1.5rem; }
}

.login-sub { text-align: center; color: var(--text-dim); font-size: 0.8rem; margin: -0.5rem 0 1.25rem; }

/* ==========================================================================
   Image lightbox — click an inline post image to view it at (up to) its
   original resolution, capped to fit the viewport. See lightbox.js.
   ========================================================================== */

body.lightbox-locked { overflow: hidden; }

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.75rem;
  padding: 4vh 4vw;
  background: rgba(3, 2, 8, 0.92);
  backdrop-filter: blur(3px);
  cursor: zoom-out;
}
.lightbox-overlay.open { display: flex; }

.lightbox-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 92vw;
  max-height: 82vh;
  object-fit: contain;
  border: 1px solid var(--line);
  box-shadow: 0 0 40px var(--cyan-glow), 0 0 80px rgba(255, 42, 109, 0.25);
  cursor: default;
}

.lightbox-caption {
  margin: 0;
  max-width: 80vw;
  color: var(--text-dim);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-align: center;
}
.lightbox-caption[hidden] { display: none; }

.lightbox-close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--line);
  color: var(--text);
  width: 2.25rem;
  height: 2.25rem;
  line-height: 1;
  font-size: 1.4rem;
  border-radius: 2px;
  cursor: pointer;
}
.lightbox-close:hover {
  color: var(--pink);
  border-color: var(--pink);
  box-shadow: 0 0 12px var(--pink-glow);
}

/* ==========================================================================
   Post detail layout: article + "nearby transmissions" side panel.
   The detail page runs wider than the 900px feed so the article column
   keeps roughly the feed's width while the panel sits beside it.
   ========================================================================== */

body:has(.post-layout) .site-main,
body:has(.post-layout) .site-header-inner { max-width: 1240px; }

.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 2rem;
  align-items: start;
}

.nearby-panel {
  position: sticky;
  top: 1.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 1.25rem 1.25rem 0.5rem;
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
}
.nearby-panel::before {
  content: "";
  position: absolute;
  left: -1px; right: -1px; top: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--amber), var(--pink));
  box-shadow: 0 0 10px var(--amber-glow);
}

.nearby-heading {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  font-weight: normal;
  letter-spacing: 0.25em;
  color: var(--amber);
  text-shadow: 0 0 10px var(--amber-glow);
}

.nearby-list { list-style: none; margin: 0; padding: 0; }
.nearby-item {
  padding: 0.85rem 0 0.85rem 0.75rem;
  border-top: 1px solid rgba(5, 217, 232, 0.12);
  border-left: 2px solid transparent;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.nearby-item:first-child { border-top: none; padding-top: 0.25rem; }
.nearby-item:hover {
  border-left-color: var(--pink);
  background: linear-gradient(90deg, rgba(255, 42, 109, 0.08), transparent);
}

.nearby-title {
  display: block;
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.35;
  text-shadow: 0 0 8px var(--cyan-glow);
}
.nearby-title:hover { color: var(--cyan); }
.nearby-date {
  margin: 0.3rem 0 0.4rem;
  color: var(--amber);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.nearby-excerpt {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.75rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 960px) {
  .post-layout { grid-template-columns: minmax(0, 1fr); }
  .nearby-panel { position: relative; top: 0; }
}