.article-shell {
  align-items: start;
  display: grid;
  gap: 40px;
  grid-template-columns: minmax(0, 1fr) 280px;
  margin: 0 auto;
  max-width: var(--shell);
  padding: 24px var(--edge) 80px;
}

.read-progress {
  background: linear-gradient(to right, var(--acid), var(--amber), var(--hot));
  height: 4px;
  left: 0;
  position: fixed;
  top: 0;
  width: 0;
  z-index: 9999;
}

.post-hero {
  background: #060709;
  border-bottom: 4px solid var(--hot);
  color: #fff;
  margin: 0 auto;
  max-width: min(1440px, 100%);
  overflow: hidden;
  padding: clamp(28px, 4vw, 42px) var(--edge) clamp(24px, 3vw, 34px);
  position: relative;
}

.post-hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-bottom: 22px;
}

.post-hero-links a {
  border: 1px solid #434343;
  color: #c7c7c7;
  font-family: var(--font-display);
  font-size: 0.46rem;
  letter-spacing: 0.08em;
  padding: 6px 10px;
  text-decoration: none;
  text-transform: uppercase;
}

.post-hero-links a:hover,
.post-hero-links a.active {
  background: #111;
  border-color: var(--acid);
  color: var(--acid);
}

.post-hero::after {
  background: linear-gradient(90deg, var(--hot), var(--amber), var(--hot));
  bottom: -1px;
  content: "";
  height: 3px;
  left: 0;
  opacity: 0.95;
  position: absolute;
  width: 100%;
}

.post-hero-category {
  color: #44d93f;
  display: block;
  font-family: var(--font-display);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.post-hero-title {
  color: #fff;
  font-family: var(--font-body);
  font-size: clamp(1.85rem, 5vw, 4.25rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
  margin: 0 0 28px;
  max-width: 840px;
}

.post-hero-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.post-hero-date {
  color: #9ca0a8;
  font-family: var(--font-display);
  font-size: 0.56rem;
  letter-spacing: 0.06em;
}

.post-hero .tag {
  background: transparent;
  border: 1px solid #4a4a4a;
  color: #d0d0d0;
  display: inline-flex;
  font-family: var(--font-display);
  font-size: 0.48rem;
  letter-spacing: 0.08em;
  padding: 6px 10px;
  text-transform: lowercase;
}

.post-hero .tag:first-of-type {
  background: var(--amber);
  border-color: var(--amber);
  color: #111;
}

.article-header {
  background: var(--ink);
  border: 3px solid var(--line);
  color: var(--white);
  margin-bottom: 32px;
  padding: clamp(28px, 5vw, 44px);
  position: relative;
}

.article-header::before {
  background: var(--hot);
  content: "";
  inset: 7px -7px -7px 7px;
  position: absolute;
  z-index: -1;
}

.article-category {
  color: var(--acid);
  display: block;
  font-family: var(--font-display);
  font-size: 0.52rem;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.article-header h1 {
  color: var(--white);
  font-size: clamp(1.55rem, 4vw, 2.45rem);
  line-height: 1.35;
  margin: 0 0 24px;
}

.article-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.article-meta time,
.read-time {
  font-family: var(--font-display);
  font-size: 0.52rem;
}

.article-meta time {
  color: #aaa;
}

.read-time {
  background: var(--amber);
  border: 2px solid var(--line);
  color: var(--ink);
  margin-left: auto;
  padding: 6px 10px;
  white-space: nowrap;
}

.post-hero .read-time {
  border: 0;
  margin-left: auto;
  padding: 7px 14px;
}

.article-tags {
  margin-top: 0;
}

.article-body {
  color: #25251f;
  font-size: 0.95rem;
  line-height: 2;
}

.article-body .post-h1 {
  border-bottom: 2px solid var(--line);
  font-family: var(--font-display);
  font-size: 0.8rem;
  line-height: 1.8;
  margin: 0 0 20px;
  padding-bottom: 10px;
  text-transform: lowercase;
}

.article-body p {
  margin: 0 0 24px;
}

.article-body h2 {
  border-bottom: 3px solid var(--line);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.82rem;
  line-height: 1.8;
  margin: 44px 0 20px;
  padding-bottom: 12px;
  text-transform: lowercase;
}

.article-body h3 {
  color: var(--hot);
  font-family: var(--font-display);
  font-size: 0.66rem;
  line-height: 1.8;
  margin: 32px 0 16px;
}

.article-body .post-h2 {
  border-bottom: 2px solid var(--line);
  font-family: var(--font-display);
  font-size: 0.68rem;
  line-height: 1.8;
  margin: 36px 0 14px;
  padding-bottom: 8px;
  text-transform: lowercase;
}

.article-body code {
  background: #eee7bd;
  border: 1px solid rgba(13, 13, 13, 0.25);
  color: var(--hot);
  font-family: var(--font-body);
  font-size: 0.82em;
  padding: 2px 6px;
}

.article-body .genius {
  color: #7756c9;
  font-weight: 700;
}

.article-body .purple {
  color: #7b5bcc;
  font-weight: 700;
}

.article-body pre {
  background: var(--ink);
  border: 3px solid var(--line);
  margin: 28px 0;
  overflow-x: auto;
  padding: 24px;
  position: relative;
}

.article-body pre::before {
  background: var(--cyan);
  content: "";
  inset: 6px -6px -6px 6px;
  position: absolute;
  z-index: -1;
}

.article-body pre code {
  background: transparent;
  border: 0;
  color: var(--acid);
  display: block;
  font-size: 0.82rem;
  line-height: 1.8;
  padding: 0;
}

.callout {
  background: var(--panel);
  border: 3px solid var(--line);
  margin: 28px 0;
  padding: 24px;
  position: relative;
}

.callout::before {
  content: "";
  inset: 6px -6px -6px 6px;
  position: absolute;
  z-index: -1;
}

.callout.warn::before { background: var(--amber); }
.callout.horror::before { background: var(--hot); }
.callout.tip::before { background: var(--acid); }

.callout-label {
  color: var(--ink);
  display: block;
  font-family: var(--font-display);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.callout p {
  font-size: 0.9rem;
  margin-bottom: 0;
}

.note-box,
.warn-box,
.unhinged-box {
  background: var(--panel);
  border: 3px solid var(--line);
  margin: 28px 0;
  padding: 20px 22px;
  position: relative;
}

.genius-box {
  background: #f0fce8;
  border: 2px solid #79c531;
  margin: 28px 0;
  padding: 18px 22px;
}

.genius-box::before {
  color: #2d6a1f;
  content: "GALAXY BRAIN";
  display: block;
  font-family: var(--font-display);
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.verdict-box {
  background: #fdf8e8;
  border: 2px solid #d3a221;
  margin: 28px 0;
  padding: 18px 22px;
  position: relative;
}

.verdict-box::before {
  color: #9f7b1b;
  content: "ACTUAL VERDICT";
  display: block;
  font-family: var(--font-display);
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.note-box::before,
.warn-box::before,
.unhinged-box::before {
  display: block;
  font-family: var(--font-display);
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.note-box::before {
  content: "NOTE";
  color: var(--ink);
}

.warn-box {
  border-color: #b3362a;
  background: #fff2ef;
}

.warn-box::before {
  content: "WARNING";
  color: #b3362a;
}

.unhinged-box {
  background: #14111b;
  border-color: var(--hot);
  color: #dfdfdf;
}

.unhinged-box::before {
  content: attr(data-label);
  color: var(--hot);
}

.unhinged-box p {
  color: #e1dfeb;
  font-style: italic;
}

.unhinged-box .scream {
  color: var(--hot);
  font-style: normal;
  font-weight: 700;
}

.terminal-block {
  background: #10131d;
  border: 2px solid #2d3449;
  border-left: 4px solid var(--acid);
  color: #d6dae5;
  margin: 28px 0;
  padding: 16px 18px;
  position: relative;
}

.terminal-block::before {
  color: var(--acid);
  content: attr(data-label);
  display: block;
  font-family: var(--font-display);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.terminal-block .t-good { color: var(--amber); font-weight: 700; }
.terminal-block .t-cmd { color: var(--acid); }
.terminal-block .t-comment { color: #8c95ac; font-style: italic; }
.terminal-block .t-err { color: #d04c40; }
.terminal-block .t-cmt { color: #8c95ac; font-style: italic; }
.terminal-block .t-wal { color: #7cd03a; font-weight: 700; }
.terminal-block .t-loud { color: #ff3f8b; font-weight: 700; letter-spacing: 0.02em; }

.price-table {
  border-collapse: collapse;
  margin: 28px 0;
  width: 100%;
}

.price-table th,
.price-table td {
  border: 1px solid rgba(13, 13, 13, 0.22);
  font-size: 0.82rem;
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.price-table th {
  background: #131926;
  color: #f3f3f3;
  font-family: var(--font-display);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
}

.price-table tr:nth-child(even) td {
  background: #f4efcf;
}

.price-table .good { color: #23652b; font-weight: 700; }
.price-table .bad { color: #bc3f2f; font-weight: 700; }
.price-table .mid { color: #a07b00; }

.stat-table {
  border-collapse: collapse;
  margin: 28px 0;
  width: 100%;
}

.stat-table th,
.stat-table td {
  border: 1px solid rgba(13, 13, 13, 0.22);
  font-size: 0.8rem;
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.stat-table th {
  background: #131926;
  color: #f3f3f3;
  font-family: var(--font-display);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
}

.stat-table tr:nth-child(even) td {
  background: #f4efcf;
}

.stat-table .yes { color: #23652b; font-weight: 700; }
.stat-table .no { color: #bc3f2f; font-weight: 700; }
.stat-table .mid { color: #a07b00; }
.stat-table .wut { color: #6c53c5; font-weight: 700; }

.choice-table {
  border-collapse: collapse;
  margin: 28px 0;
  width: 100%;
}

.choice-table th,
.choice-table td {
  border: 1px solid rgba(13, 13, 13, 0.22);
  font-size: 0.8rem;
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.choice-table th {
  background: #131926;
  color: #f3f3f3;
  font-family: var(--font-display);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
}

.choice-table th.green { color: #7cd03a; }
.choice-table th.pink { color: #ff4a90; }

.choice-table tr:nth-child(even) td {
  background: #f4efcf;
}

.choice-table .yes { color: #23652b; font-weight: 700; }
.choice-table .no { color: #bc3f2f; font-weight: 700; }
.choice-table .mid { color: #a07b00; }
.choice-table .wut { color: #6c53c5; font-weight: 700; }

.article-footer {
  align-items: center;
  border-top: 3px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  margin-top: 48px;
  padding-top: 32px;
}

.back-link,
.share-btn,
.author-link {
  background: var(--panel);
  border: 2px solid var(--line);
  color: var(--ink);
  display: inline-flex;
  font-family: var(--font-display);
  font-size: 0.56rem;
  padding: 10px 16px;
  text-decoration: none;
  transition: background 0.1s, color 0.1s;
}

.back-link:hover,
.share-btn:hover,
.author-link:hover {
  background: var(--ink);
  color: var(--acid);
}

.share-row {
  display: flex;
}

.share-btn {
  border-right: 0;
  cursor: pointer;
}

.share-btn:last-child {
  border-right: 2px solid var(--line);
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 24px;
}

.sidebar-box {
  background: var(--panel);
  border: 3px solid var(--line);
  position: relative;
}

.sidebar-box::after {
  content: "";
  inset: 6px -6px -6px 6px;
  position: absolute;
  z-index: -1;
}

.sidebar-box:nth-child(1)::after { background: var(--amber); }
.sidebar-box:nth-child(2)::after { background: var(--purple-pop); }
.sidebar-box:nth-child(3)::after { background: var(--cyan); }

.sidebar-title {
  border-bottom: 2px solid var(--line);
  color: var(--ink);
  display: block;
  font-family: var(--font-display);
  font-size: 0.52rem;
  padding: 14px 16px;
}

.sidebar-body {
  padding: 16px;
}

.related-item {
  border-bottom: 1px dashed rgba(13, 13, 13, 0.22);
  color: var(--ink);
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.55;
  padding: 9px 0;
  text-decoration: none;
}

.related-item:last-child {
  border-bottom: 0;
}

.related-item:hover {
  color: var(--hot);
}

.related-date {
  color: var(--muted);
  display: block;
  font-family: var(--font-display);
  font-size: 0.46rem;
  font-weight: 400;
  margin-top: 4px;
}

.author-note {
  color: var(--muted);
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.8;
  margin: 0 0 14px;
}

.side-deco {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.deco-dot {
  animation: dot-cycle 4s step-end infinite;
  background: var(--hot);
  border: 2px solid var(--line);
  border-radius: 50%;
  height: 10px;
  width: 10px;
}

.deco-dot:nth-child(2) { background: var(--acid); animation-delay: 1.3s; }
.deco-dot:nth-child(3) { background: var(--cyan); animation-delay: 2.6s; }
.deco-dot:nth-child(4) { background: var(--amber); animation-delay: 0.6s; }

@keyframes dot-cycle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.6); }
}

@media (max-width: 900px) {
  .post-hero-links {
    justify-content: flex-start;
  }

  .post-hero-title {
    font-size: clamp(1.65rem, 9vw, 2.7rem);
  }

  .post-hero .read-time {
    margin-left: 0;
  }

  .article-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
  }

  .side-deco {
    display: none;
  }

  .read-time {
    margin-left: 0;
  }
}