/* ============================================================
   Design tokens
   Concept: an architect's blueprint sheet for the game's night-city
   world. Cool navy "blueprint paper", cyan linework, and a hot-magenta
   accent standing in for the anomalies/neon signage that define the
   game's urban aesthetic. Corner registration marks and a monospace
   "stamp" for the code tie the visual language directly to the literal
   subject: filed property blueprints. The background gradient below
   evokes the game's night-city/neon-burst mood in original CSS, rather
   than reproducing any specific artwork.
   ============================================================ */
:root {
  --ink-0: #061424;      /* deepest background */
  --ink-1: #0d2340;      /* page background */
  --ink-2: #14304f;      /* card surface */
  --ink-3: #1c3d61;      /* raised surface / hover */
  --line: #2a5075;       /* hairline borders */
  --line-bright: #5f9bc7;

  --paper: #e8f1fb;      /* primary text, "blueprint white" */
  --paper-dim: #8fb2d1;  /* secondary text */
  --paper-faint: #4d7396; /* tertiary text - dates, hints */

  --cyan: #7fd8ff;
  --cyan-glow: rgba(127, 216, 255, 0.35);

  --violet: #6a4fd1;      /* night-sky mid-tone, used for background glow */
  --violet-light: #b3a0f5; /* lighter variant for text/badges - legible on dark cards */
  --violet-glow: rgba(106, 79, 209, 0.3);

  --accent: #ff3d81;     /* anomaly / neon accent */
  --accent-dim: #c92e66;
  --accent-glow: rgba(255, 61, 129, 0.35);

  --font-display: 'Rajdhani', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --radius: 6px;
  --max-width: 1180px;
}

* { box-sizing: border-box; }

/* Global safety net: the native [hidden] attribute means "not displayed,
   no exceptions." Several elements below (auth UI, edit button, modal
   forms) also carry their own `display: flex` rule for when they ARE
   visible - without this override, that class-based display wins over
   the browser's built-in [hidden] rule, and toggling .hidden in JS
   silently does nothing. This one rule covers every current and future
   case instead of patching each element individually. */
[hidden] { display: none !important; }

html { color-scheme: dark; }

body {
  margin: 0;
  color: var(--paper);
  font-family: var(--font-body);
  line-height: 1.5;
  position: relative;
  min-height: 100vh;
  /* night-city gradient: deep navy-black base, a violet wash toward the
     upper right, and a soft magenta glow standing in for a neon burst -
     evokes the game's aesthetic without reproducing any specific artwork.
     If swapping in a real image instead, replace this whole property with:
     background: url("your-image.jpg") center / cover fixed;
     - the .vignette-overlay below handles darkening automatically either way. */
  background:
    radial-gradient(ellipse 900px 700px at 85% 8%, var(--accent-glow), transparent 60%),
    radial-gradient(ellipse 1100px 800px at 75% 0%, var(--violet-glow), transparent 55%),
    linear-gradient(rgba(6,20,36,0.75), rgba(6,20,36,0.85)), url("img/bg.jpg") center / cover fixed;
  background-attachment: fixed;
}

/* faint starfield, purely decorative, sits above the gradient and below content */
.starfield {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 15%, #ffffff 100%, transparent),
    radial-gradient(1px 1px at 65% 8%, #ffffff 100%, transparent),
    radial-gradient(1.5px 1.5px at 82% 22%, #ffffff 100%, transparent),
    radial-gradient(1px 1px at 45% 30%, #ffffff 100%, transparent),
    radial-gradient(1px 1px at 90% 45%, #ffffff 100%, transparent),
    radial-gradient(1.5px 1.5px at 10% 40%, #ffffff 100%, transparent),
    radial-gradient(1px 1px at 55% 12%, #ffffff 100%, transparent),
    radial-gradient(1px 1px at 30% 6%, #ffffff 100%, transparent);
  background-repeat: no-repeat;
}

/* Darkens the whole background consistently - not just top/bottom edges -
   so text and UI elements have reliable contrast no matter where they sit
   against whatever image is behind them. This is what lets the header and
   toolbar below have NO fill of their own (just a blur): they're not
   separate panels floating on top of the art, they sit directly on this
   same darkened surface, so there's no visible seam between "UI" and
   "background". Darkest at the very top/bottom where sticky UI and the
   footer sit, but never fully see-through anywhere. */
.vignette-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    to bottom,
    rgba(3, 8, 16, 0.82) 0%,
    rgba(3, 8, 16, 0.45) 15%,
    rgba(3, 8, 16, 0.45) 85%,
    rgba(3, 8, 16, 0.85) 100%
  );
}

/* faint blueprint grid across the whole page */
.grid-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.08;
}

a { color: var(--cyan); }

/* ---------------- header ---------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: none;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 12px; }

.brand-mark {
  font-size: 28px;
  color: var(--cyan);
  line-height: 1;
  text-shadow: 0 0 12px var(--cyan-glow);
}

.brand-text { display: flex; flex-direction: column; line-height: 1.2; }

.brand-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.02em;
}

.brand-subtitle {
  font-size: 12px;
  color: var(--paper-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------------- header actions (auth + primary CTA, grouped) ---------------- */

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-divider {
  width: 1px;
  height: 24px;
  background: var(--line);
}

/* ---------------- auth ---------------- */

.auth-area { display: flex; align-items: center; }

.auth-signed-out { display: flex; gap: 8px; }

/* Ghost/outline style, deliberately lighter-weight than .btn-primary so
   these read as secondary actions rather than competing with the main CTA */
.btn-auth {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--paper-dim);
  border-radius: var(--radius);
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.btn-auth:hover {
  border-color: var(--cyan);
  color: var(--paper);
  background: rgba(127, 216, 255, 0.06);
}

.auth-signed-in {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 14px 5px 5px;
}

.auth-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line-bright);
  object-fit: cover;
}

.auth-name {
  font-size: 13px;
  color: var(--paper);
  font-weight: 500;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-edit-name {
  background: none;
  border: none;
  color: var(--paper-faint);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.btn-edit-name:hover { color: var(--cyan); }

.btn-signout {
  font-family: var(--font-body);
  font-size: 12px;
  background: none;
  border: none;
  border-left: 1px solid var(--line);
  color: var(--paper-faint);
  cursor: pointer;
  padding: 0 0 0 10px;
}

.btn-signout:hover { color: var(--accent); }

.displayname-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 320px;
  margin: 0 auto;
}

.displayname-form input {
  background: var(--ink-1);
  border: 1px solid var(--line);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 9px 12px;
  border-radius: var(--radius);
  text-align: center;
}

.displayname-form input:focus {
  outline: none;
  border-color: var(--cyan);
}

/* ---------------- buttons ---------------- */
.btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.03em;
  border-radius: var(--radius);
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--accent);
  color: #1a0510;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-primary:hover {
  background: #ff5c96;
  box-shadow: 0 0 20px var(--accent-glow);
}

.btn-plus { font-size: 18px; line-height: 1; }

/* ---------------- hero ---------------- */
.hero {
  position: relative;
  z-index: 1;
  border-bottom: 1px solid var(--line);
}

.hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 64px 24px 48px;
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--cyan);
  letter-spacing: 0.12em;
  margin: 0 0 16px;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 52px);
  margin: 0 0 16px;
  letter-spacing: 0.01em;
}

.hero-body {
  max-width: 560px;
  color: var(--paper-dim);
  font-size: 16px;
  margin: 0;
}

/* ---------------- toolbar ---------------- */
.toolbar {
  position: sticky;
  top: 65px;
  z-index: 15;
  background: none;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.toolbar-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.search-field { flex: 1 1 320px; position: relative; }

.search-field::before {
  content: "⌕";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cyan);
  font-size: 15px;
  pointer-events: none;
}

.search-field input,
.filter-field select {
  width: 100%;
  background: rgba(14, 30, 52, 0.55);
  backdrop-filter: blur(4px);
  border: 1px solid var(--line);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 10px 14px;
  border-radius: var(--radius);
  transition: border-color 0.12s ease, background 0.12s ease;
}

.search-field input { padding-left: 36px; }

.search-field input:hover,
.filter-field select:hover {
  border-color: var(--line-bright);
}

.search-field input:focus,
.filter-field select:focus {
  outline: none;
  border-color: var(--cyan);
  background: rgba(14, 30, 52, 0.75);
  box-shadow: 0 0 0 3px var(--cyan-glow);
}

.filter-field { flex: 0 0 200px; }

/* ---------------- archive grid ---------------- */
.archive {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 32px 24px 80px;
}

.status-line {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 20px;
  min-height: 18px;
  opacity: 0.85;
}

.blueprint-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.blueprint-card {
  position: relative;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.blueprint-card:hover {
  border-color: var(--line-bright);
  transform: translateY(-2px);
}

/* corner registration marks - the signature detail */
.card-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  z-index: 2;
  pointer-events: none;
}
.card-corner-tl {
  top: 8px; left: 8px;
  border-top: 2px solid var(--cyan);
  border-left: 2px solid var(--cyan);
  opacity: 0.7;
}
.card-corner-br {
  bottom: 8px; right: 8px;
  border-bottom: 2px solid var(--cyan);
  border-right: 2px solid var(--cyan);
  opacity: 0.7;
}

.card-image-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--ink-0);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--line);
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.card-image.has-image { display: block; cursor: zoom-in; }
.card-image.has-image + .card-image-fallback { display: none; }

.card-image-fallback {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--line-bright);
}

.card-image-zoom-hint {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 20, 36, 0.75);
  border: 1px solid var(--line-bright);
  border-radius: 4px;
  color: var(--cyan);
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.card-image.has-image ~ .card-image-zoom-hint { opacity: 0; }
.card-image-wrap:has(.card-image.has-image):hover .card-image-zoom-hint { opacity: 1; }

/* Region shown as a corner chip directly on the thumbnail (inspired by
   how similar community-blueprint sites badge their images) rather than
   competing for space in the text body below. */
.card-region-overlay {
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-0);
  background: var(--violet-light);
  border-radius: 4px;
  padding: 3px 7px;
  pointer-events: none;
}

.card-region-overlay:empty { display: none; }

/* Small badge indicating this blueprint has a video showcase, matching
   the "play icon on thumbnail" pattern seen on similar community sites. */
.card-video-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--paper);
  background: rgba(255, 61, 129, 0.85);
  border-radius: 4px;
  padding: 3px 7px;
  pointer-events: none;
  display: none;
}

.card-video-badge.has-video { display: inline-block; }

.card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.card-category {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 2px 8px;
}

.card-region {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--violet-light);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 2px 8px;
}

.card-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--paper-faint);
}

.card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  margin: 0;
  color: var(--paper);
}

.card-description {
  font-size: 13.5px;
  color: var(--paper-dim);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.card-tag {
  font-size: 11px;
  color: var(--paper-dim);
  background: var(--ink-3);
  border-radius: 3px;
  padding: 2px 8px;
}

.card-stats-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.card-views {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--paper-faint);
  font-size: 13px;
}

.like-btn, .comment-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: var(--paper-dim);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 0;
}

.like-btn:hover, .comment-btn:hover { color: var(--paper); }

.like-icon { font-size: 16px; line-height: 1; transition: transform 0.15s ease; }

.like-btn.liked { color: var(--accent); cursor: default; }
.like-btn.liked .like-icon { color: var(--accent); }
.like-btn.liked:hover { color: var(--accent); }

.like-btn.animating .like-icon { transform: scale(1.3); }

.edit-btn {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  color: var(--paper-dim);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 0;
  margin-left: auto;
}

.edit-btn:hover { color: var(--cyan); }

.card-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.card-code-stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px dashed var(--accent);
  border-radius: 4px;
  padding: 4px 8px;
}

.stamp-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.stamp-value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--paper);
}

.copy-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--paper-dim);
  border-radius: 3px;
  padding: 2px 6px;
  cursor: pointer;
}

.copy-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.copy-btn.copied { border-color: var(--cyan); color: var(--cyan); }

.card-author {
  font-size: 12px;
  color: var(--paper-dim);
  font-style: italic;
}

/* ---------------- footer ---------------- */
.site-footer {
  text-align: center;
  padding: 24px;
  color: var(--paper-faint);
  font-size: 12px;
  border-top: 1px solid var(--line);
}

/* ---------------- modal ---------------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 20, 36, 0.75);
  backdrop-filter: blur(4px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal {
  background: var(--ink-2);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 0 40px rgba(0,0,0,0.5);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}

.modal-header h2 {
  font-family: var(--font-display);
  font-size: 20px;
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  color: var(--paper-dim);
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}
.modal-close:hover { color: var(--paper); }

.modal-form {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.signin-required {
  padding: 24px;
  text-align: center;
}

.signin-required p {
  color: var(--paper-dim);
  font-size: 14px;
  margin: 0 0 16px;
}

.signin-required-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.posting-as-display {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 14px;
  color: var(--paper-dim);
  display: flex;
  align-items: center;
  gap: 8px;
}

.posting-as-display img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field-row { display: flex; gap: 16px; }
.field-row .field { flex: 1; }

.field-label {
  font-size: 13px;
  color: var(--paper-dim);
  font-weight: 500;
}

.req { color: var(--accent); }

.field input[type="text"],
.field input[type="file"],
.field select,
.field textarea {
  background: var(--ink-1);
  border: 1px solid var(--line);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 9px 12px;
  border-radius: var(--radius);
  resize: vertical;
}

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--cyan);
}

.field-hint {
  font-size: 11px;
  color: var(--paper-faint);
}

.code-hint-valid { color: var(--cyan); }
.code-hint-invalid { color: var(--accent); }

.field input.input-invalid {
  border-color: var(--accent);
}

.field-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-error {
  background: rgba(255, 61, 129, 0.12);
  border: 1px solid var(--accent-dim);
  color: #ffb3cc;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: var(--radius);
}

.modal-actions { display: flex; justify-content: flex-end; }

/* ---------------- detail modal + comments ---------------- */

.modal-detail { max-width: 640px; }

.modal-detail-body { padding: 20px 24px 24px; }

.detail-image {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  margin-bottom: 16px;
  max-height: 320px;
  object-fit: cover;
  cursor: zoom-in;
}

.detail-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 16px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-0);
}

.detail-video-wrap iframe,
.detail-video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.detail-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.detail-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 12px;
}

.detail-description {
  color: var(--paper-dim);
  font-size: 14px;
  margin: 0 0 16px;
  white-space: pre-wrap;
}

.detail-stats-row {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--paper-faint);
  margin-bottom: 12px;
}

.detail-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  margin-bottom: 8px;
}

.comments-heading {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  margin: 24px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
  max-height: 260px;
  overflow-y: auto;
}

.comment-item {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
}

.comment-item-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}

.comment-author {
  font-weight: 600;
  font-size: 13px;
  color: var(--cyan);
}

.comment-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--paper-faint);
}

.comment-body {
  font-size: 13.5px;
  color: var(--paper);
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.comments-empty {
  color: var(--paper-faint);
  font-size: 13px;
  font-style: italic;
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.comment-name-input,
.comment-form textarea {
  background: var(--ink-1);
  border: 1px solid var(--line);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 9px 12px;
  border-radius: var(--radius);
  resize: vertical;
}

.comment-name-input:focus, .comment-form textarea:focus {
  outline: none;
  border-color: var(--cyan);
}

.comment-form .btn { align-self: flex-end; }

/* ---------------- lightbox ---------------- */

.lightbox-overlay {
  background: rgba(6, 20, 36, 0.92);
  padding: 40px;
  cursor: zoom-out;
}

.lightbox-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
  cursor: default;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 28px;
  font-size: 32px;
  color: var(--paper);
  z-index: 1;
}

/* ---------------- responsive & accessibility ---------------- */
@media (max-width: 560px) {
  .field-row { flex-direction: column; }
  .hero-inner { padding: 48px 20px 36px; }
}

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}