/* cynix.jp Article Hierarchy — extends Tech Journal aesthetic */

/* Inherits :root tokens from mag.css */
.mag-article, .mag-archive, .mag-category {
  background: var(--paper);
  color: var(--ink);
  font-family: "Noto Sans JP", -apple-system, sans-serif;
  font-feature-settings: "palt" 1;
  overflow-x: hidden;
}

/* ============ Breadcrumb ============ */
.cy-crumb {
  display: flex;
  gap: 8px;
  padding: 14px 56px;
  border-bottom: 1px solid var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--paper-warm);
  align-items: center;
  flex-wrap: wrap;
}
.cy-crumb a { color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; }
.cy-crumb a:hover { border-bottom-color: var(--ink); }
.cy-crumb .sep { opacity: 0.4; }
.cy-crumb .here { font-weight: 700; opacity: 0.6; }

/* ============ Category LP — full-bleed editorial header ============ */
.cat-cover {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  border-bottom: 1px solid var(--ink);
  min-height: 520px;
}
.cat-cover-text {
  padding: 56px 56px 48px;
  border-right: 1px solid var(--ink);
  position: relative;
}
.cat-mark {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  padding: 5px 12px;
  margin-bottom: 28px;
}
.cat-h {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-size: 116px;
  line-height: 0.86;
  letter-spacing: -0.05em;
  margin: 0 0 12px;
}
.cat-h em {
  font-style: italic;
  color: var(--vermilion);
}
.cat-h .en {
  display: block;
  font-family: "Noto Sans JP", serif;
  font-style: italic;
  font-weight: 900;
  font-size: 36px;
  letter-spacing: -0.02em;
  color: var(--ink);
  opacity: 0.4;
  margin-top: 8px;
}
.cat-deck {
  font-size: 17px;
  line-height: 1.75;
  max-width: 540px;
  margin: 24px 0 32px;
  border-left: 4px solid var(--vermilion);
  padding-left: 18px;
}
.cat-bar {
  display: flex;
  gap: 32px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.cat-bar > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cat-bar .lab { opacity: 0.5; font-size: 10px; }
.cat-bar .val {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -0.02em;
}

.cat-cover-vis {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  display: flex;
  align-items: stretch;
}
.cat-cover-vis-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 30%, rgba(255, 242, 0, 0.18) 0%, transparent 40%),
    radial-gradient(ellipse at 70% 70%, rgba(0, 212, 255, 0.4) 0%, transparent 50%);
}
.cat-cover-deco {
  position: absolute;
  font-family: "Noto Sans JP", serif;
  font-style: italic;
  font-weight: 900;
  font-size: 380px;
  line-height: 0.8;
  color: var(--vermilion);
  opacity: 0.25;
  z-index: 1;
  user-select: none;
}
.cat-cover-stamp {
  position: absolute;
  top: 32px;
  right: 32px;
  width: 110px;
  height: 110px;
  border: 2px solid var(--cyan);
  color: var(--cyan);
  border-radius: 50%;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.3;
  text-transform: uppercase;
  transform: rotate(-6deg);
  z-index: 3;
}
.cat-cover-stamp .big {
  font-family: "Noto Sans JP", serif;
  font-size: 28px;
  font-weight: 900;
  margin: 4px 0;
}
.cat-cover-pull {
  align-self: flex-end;
  padding: 36px;
  width: 100%;
  z-index: 3;
}
.cat-cover-pull q {
  font-family: "Noto Sans JP", serif;
  font-style: italic;
  font-weight: 900;
  font-size: 32px;
  line-height: 1.3;
  color: var(--paper);
  display: block;
  quotes: none;
  margin-bottom: 12px;
}
.cat-cover-pull q::before, .cat-cover-pull q::after { content: ""; }
.cat-cover-pull-attr {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--cyan);
  text-transform: uppercase;
}

/* ============ Subcategory strip ============ */
.subcat-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-bottom: 1px solid var(--ink);
  background: var(--paper-warm);
}
.subcat-cell {
  padding: 24px 22px;
  border-right: 1px solid var(--ink);
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background 200ms ease;
  min-height: 140px;
}
.subcat-cell:last-child { border-right: none; }
.subcat-cell:hover { background: var(--ink); color: var(--paper); }
.subcat-cell:hover .subcat-num { color: var(--highlight); }
.subcat-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.6;
}
.subcat-cell h4 {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin: 4px 0;
  line-height: 1.15;
}
.subcat-cell p {
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
  opacity: 0.7;
}
.subcat-cell .ct {
  margin-top: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* ============ Pillar (featured articles) ============ */
.pillar {
  padding: 64px 56px;
  border-bottom: 1px solid var(--ink);
}
.pillar-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  margin-bottom: 32px;
  gap: 32px;
}
.pillar-h {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-size: 64px;
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 0;
}
.pillar-h em { font-style: italic; color: var(--vermilion); }
.pillar-mark {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: right;
  line-height: 1.5;
  opacity: 0.7;
}
.pillar-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 28px;
}
.pillar-card {
  border: 1px solid var(--ink);
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 200ms ease;
}
.pillar-card:hover { transform: translateY(-4px); }
.pillar-card:hover .pillar-img-svg { filter: brightness(1.1); }
.pillar-card.lead { grid-row: span 2; }
.pillar-img-svg {
  width: 100%;
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
}
.pillar-card.lead .pillar-img-svg { aspect-ratio: 16 / 9; }
.pillar-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 16px 20px 0;
  display: flex;
  gap: 12px;
  align-items: center;
}
.pillar-meta .cat-tag {
  background: var(--vermilion);
  color: var(--paper);
  padding: 3px 8px;
  font-weight: 700;
}
.pillar-meta .pg {
  margin-left: auto;
  opacity: 0.6;
  font-weight: 500;
}
.pillar-title {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  letter-spacing: -0.03em;
  margin: 12px 20px;
  line-height: 1.15;
}
.pillar-card.lead .pillar-title {
  font-size: 40px;
}
.pillar-card .pillar-title {
  font-size: 22px;
}
.pillar-deck {
  padding: 0 20px 16px;
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
  opacity: 0.85;
}
.pillar-card.lead .pillar-deck {
  font-size: 16px;
}
.pillar-foot {
  padding: 12px 20px 16px;
  border-top: 1px solid var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  margin-top: auto;
}

/* ============ List with ranking ============ */
.cat-list {
  padding: 64px 56px;
  border-bottom: 1px solid var(--ink);
  background: var(--paper-warm);
}
.cat-list-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 16px;
}
.cat-list-head h3 {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-size: 36px;
  letter-spacing: -0.03em;
  margin: 0;
}
.cat-list-head h3 em { font-style: italic; color: var(--vermilion); }
.cat-list-filters {
  display: flex;
  gap: 16px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cat-list-filters a {
  color: var(--ink);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--ink);
}
.cat-list-filters a.on, .cat-list-filters a:hover {
  background: var(--ink);
  color: var(--paper);
}

.cat-list-rows {
  display: grid;
  gap: 0;
}
.cat-list-row {
  display: grid;
  grid-template-columns: 80px 200px 1fr 220px 100px;
  gap: 24px;
  padding: 24px 8px;
  border-top: 1px solid var(--ink);
  text-decoration: none;
  color: var(--ink);
  align-items: center;
  transition: background 150ms ease;
}
.cat-list-row:last-child { border-bottom: 1px solid var(--ink); }
.cat-list-row:hover { background: var(--ink); color: var(--paper); }
.cat-list-row:hover .row-page { color: var(--highlight); }
.cat-list-row:hover .row-cat { background: var(--paper); color: var(--ink); }
.row-page {
  font-family: "JetBrains Mono", monospace;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.row-cat {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  padding: 4px 10px;
  display: inline-block;
  justify-self: start;
}
.row-title {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.row-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.row-arrow {
  font-family: "Noto Sans JP", serif;
  font-style: italic;
  font-weight: 900;
  font-size: 28px;
  text-align: right;
}

/* ============ Tag cloud ============ */
.tagcloud {
  padding: 56px;
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
}
.tagcloud h3 {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-size: 28px;
  margin: 0 0 24px;
  letter-spacing: -0.02em;
}
.tagcloud h3 em { font-style: italic; color: var(--vermilion); }
.tagcloud-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.tagcloud-list a {
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 700;
  background: var(--paper);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  transition: all 150ms ease;
}
.tagcloud-list a:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-2px);
}
.tagcloud-list a .ct {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  opacity: 0.6;
}

/* ============ Newsletter strip ============ */
.cat-news {
  padding: 56px;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  border-bottom: 1px solid var(--ink);
}
.cat-news h3 {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-size: 56px;
  margin: 0;
  letter-spacing: -0.04em;
  line-height: 0.9;
}
.cat-news h3 em { font-style: italic; color: var(--highlight); }
.cat-news p { font-size: 15px; line-height: 1.7; max-width: 480px; opacity: 0.85; }
.cat-news-form {
  display: flex;
  gap: 0;
  border: 1px solid var(--paper);
}
.cat-news-form input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 16px 20px;
  color: var(--paper);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  outline: none;
}
.cat-news-form input::placeholder { color: var(--paper); opacity: 0.5; }
.cat-news-form button {
  background: var(--highlight);
  color: var(--ink);
  border: none;
  padding: 16px 28px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 150ms ease;
}
.cat-news-form button:hover { background: var(--paper); }

/* ============ ARTICLE PAGE ============ */
.art-meta-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 20px 56px;
  border-bottom: 1px solid var(--ink);
  background: var(--paper-warm);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.art-meta-bar .left { display: flex; gap: 16px; align-items: center; }
.art-meta-bar .cat-tag {
  background: var(--vermilion);
  color: var(--paper);
  padding: 4px 10px;
  font-weight: 700;
}
.art-meta-bar .right { display: flex; gap: 14px; }
.art-meta-bar a { color: var(--ink); text-decoration: none; opacity: 0.7; }
.art-meta-bar a:hover { opacity: 1; }

.art-pr {
  background: var(--paper-warm);
  border-top: 1px dashed var(--ink);
  border-bottom: 1px dashed var(--ink);
  padding: 12px 56px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  display: flex;
  gap: 8px;
  align-items: center;
  opacity: 0.75;
}
.art-pr .icon {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}

.art-cover {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  border-bottom: 1px solid var(--ink);
}
.art-cover-text {
  padding: 64px 56px 56px;
  border-right: 1px solid var(--ink);
  position: relative;
}
.art-mark {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  padding: 5px 12px;
  margin-bottom: 28px;
}
.art-h {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-size: 84px;
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin: 0 0 24px;
}
.art-h .hl {
  background: var(--highlight);
  padding: 0 8px 4px;
  display: inline-block;
  transform: rotate(-1deg);
}
.art-h em { font-style: italic; color: var(--vermilion); }
.art-deck {
  font-size: 18px;
  line-height: 1.75;
  border-left: 4px solid var(--ink);
  padding-left: 18px;
  margin: 0 0 32px;
  font-weight: 500;
  max-width: 580px;
}
.art-byline {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 24px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 16px 0;
}
.art-byline-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ink);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  border: 1px solid var(--ink);
}
.art-byline-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.art-byline-name {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-size: 18px;
}
.art-byline-role {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}
.art-byline-stats {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
  opacity: 0.7;
  line-height: 1.6;
}
.art-share {
  display: flex;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.art-share a {
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 4px 10px;
  text-decoration: none;
}
.art-share a:hover { background: var(--ink); color: var(--paper); }

.art-cover-vis {
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: stretch;
  position: relative;
  overflow: hidden;
}
.art-cover-deco {
  position: absolute;
  font-family: "Noto Sans JP", serif;
  font-style: italic;
  font-weight: 900;
  font-size: 360px;
  line-height: 0.8;
  color: var(--vermilion);
  opacity: 0.22;
  z-index: 1;
  user-select: none;
  inset: -40px auto auto -40px;
}

/* TOC sidebar */
.art-grid {
  display: grid;
  grid-template-columns: 220px 1fr 280px;
  gap: 48px;
  padding: 64px 56px;
  border-bottom: 1px solid var(--ink);
}
.art-toc {
  position: sticky;
  top: 200px;
  align-self: start;
  font-family: "JetBrains Mono", monospace;
}
.art-toc h5 {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ink);
}
.art-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc;
}
.art-toc li {
  counter-increment: toc;
  margin-bottom: 10px;
}
.art-toc a {
  color: var(--ink);
  text-decoration: none;
  font-size: 12px;
  line-height: 1.5;
  display: block;
  padding-left: 28px;
  position: relative;
  transition: color 150ms ease;
}
.art-toc a::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-size: 11px;
  opacity: 0.5;
}
.art-toc a:hover { color: var(--vermilion); }

.art-body {
  font-family: "Noto Sans JP", serif;
  font-size: 17px;
  line-height: 1.85;
  max-width: 720px;
}
.art-body h2 {
  font-weight: 900;
  font-size: 36px;
  letter-spacing: -0.03em;
  margin: 56px 0 20px;
  padding-top: 24px;
  border-top: 3px double var(--ink);
}
.art-body h2 .num {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--vermilion);
  display: block;
  margin-bottom: 8px;
}
.art-body h3 {
  font-weight: 900;
  font-size: 22px;
  margin: 32px 0 12px;
  letter-spacing: -0.02em;
}
.art-body p { margin: 0 0 18px; }
.art-body p.lead {
  font-size: 22px;
  line-height: 1.7;
  font-weight: 500;
  margin-bottom: 28px;
}
.art-body p.dropcap::first-letter {
  font-size: 96px;
  font-weight: 900;
  font-style: italic;
  float: left;
  line-height: 0.85;
  margin: 4px 12px 0 0;
  color: var(--vermilion);
}
.art-body strong { background: var(--highlight); padding: 0 4px; font-weight: 700; }
.art-body a { color: var(--vermilion); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.pullquote {
  font-family: "Noto Sans JP", serif;
  font-style: italic;
  font-weight: 900;
  font-size: 36px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--vermilion);
  border-top: 4px solid var(--ink);
  border-bottom: 4px solid var(--ink);
  padding: 24px 0;
  margin: 40px 0;
}

/* Aside (right column) */
.art-aside {
  position: sticky;
  top: 200px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.art-aside-card {
  border: 1px solid var(--ink);
  background: var(--paper-warm);
  padding: 20px;
}
.art-aside-card h6 {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0 0 12px;
  font-weight: 700;
}
.art-aside-card .key {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 8px 0;
  border-top: 1px solid var(--ink);
  padding-top: 8px;
}
.art-aside-card .key:first-of-type { border-top: none; padding-top: 0; }

/* Comparison table */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin: 32px 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid var(--ink);
}
.compare-table thead th {
  background: var(--ink);
  color: var(--paper);
  padding: 14px 12px;
  text-align: left;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-transform: uppercase;
  border-right: 1px solid var(--paper);
}
.compare-table thead th:last-child { border-right: none; }
.compare-table tbody td {
  padding: 16px 12px;
  border-top: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
  vertical-align: top;
}
.compare-table tbody td:last-child { border-right: none; }
.compare-table tbody tr.recommended {
  background: var(--paper-warm);
  position: relative;
}
.compare-table tbody tr.recommended td:first-child::before {
  content: "★ 編集部選定";
  position: absolute;
  top: -1px;
  left: -1px;
  background: var(--vermilion);
  color: var(--paper);
  padding: 2px 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.compare-table .name {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.compare-table .brand { font-size: 11px; opacity: 0.6; margin-top: 2px; }
.compare-table .rating { font-weight: 700; color: var(--vermilion); font-size: 16px; }

/* Ranking medals */
.rank-podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 32px 0;
  border: 1px solid var(--ink);
}
.rank-card {
  padding: 28px 24px;
  border-right: 1px solid var(--ink);
  position: relative;
  background: var(--paper);
}
.rank-card:last-child { border-right: none; }
.rank-card.gold { background: linear-gradient(180deg, rgba(255,184,0,0.12) 0%, var(--paper) 60%); }
.rank-card.silver { background: linear-gradient(180deg, rgba(199,205,215,0.18) 0%, var(--paper) 60%); }
.rank-card.bronze { background: linear-gradient(180deg, rgba(205,127,50,0.12) 0%, var(--paper) 60%); }
.rank-medal {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Noto Sans JP", serif;
  font-style: italic;
  font-weight: 900;
  font-size: 32px;
  color: var(--paper);
  margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(10,10,10,0.2);
}
.rank-card.gold .rank-medal { background: linear-gradient(135deg, #FFD700 0%, #FFB800 100%); color: var(--ink); }
.rank-card.silver .rank-medal { background: linear-gradient(135deg, #E5E8EE 0%, #C7CDD7 100%); color: var(--ink); }
.rank-card.bronze .rank-medal { background: linear-gradient(135deg, #D9974E 0%, #B87333 100%); }
.rank-name {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.rank-brand {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 14px;
}
.rank-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--ink);
  padding-top: 0;
}
.rank-stats > div {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 10px 4px;
  border-bottom: 1px dotted rgba(10, 10, 10, 0.18);
}
.rank-stats > div:last-child { border-bottom: none; }
.rank-stats .lab {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vermilion);
  opacity: 0.85;
}
.rank-stats .val {
  font-family: "Noto Sans JP", serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.01em;
  line-height: 1.45;
  word-break: break-word;
  white-space: normal;
  margin: 0;
  text-transform: none;
}

/* Pros / Cons */
.proscons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 32px 0;
  border: 1px solid var(--ink);
}
.proscons-col {
  padding: 24px;
}
.proscons-col.pros { background: rgba(79, 203, 169, 0.12); border-right: 1px solid var(--ink); }
.proscons-col.cons { background: rgba(255, 107, 43, 0.1); }
.proscons-col h5 {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.proscons-col.pros h5 .ic { color: #1a8a6a; }
.proscons-col.cons h5 .ic { color: var(--vermilion); }
.proscons-col ul { list-style: none; padding: 0; margin: 0; }
.proscons-col li {
  padding: 8px 0 8px 26px;
  border-top: 1px dashed var(--ink);
  font-size: 14px;
  line-height: 1.6;
  position: relative;
}
.proscons-col li:first-child { border-top: none; }
.proscons-col.pros li::before { content: "✓"; position: absolute; left: 0; font-weight: 900; color: #1a8a6a; }
.proscons-col.cons li::before { content: "▲"; position: absolute; left: 4px; color: var(--vermilion); }

/* Step guide */
.step-guide { margin: 32px 0; }
.step-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid var(--ink);
  position: relative;
}
.step-row:last-child { border-bottom: 1px solid var(--ink); }
.step-num {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-style: italic;
  font-size: 28px;
}
.step-row h4 {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.step-row p { font-size: 14px; line-height: 1.7; margin: 0; }

/* FAQ */
.faq-list {
  margin: 32px 0;
  border-top: 1px solid var(--ink);
}
.faq-item {
  border-bottom: 1px solid var(--ink);
  padding: 20px 0;
}
.faq-q {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.02em;
  display: flex;
  gap: 12px;
  align-items: baseline;
  cursor: pointer;
  list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::before {
  content: "Q.";
  font-family: "JetBrains Mono", monospace;
  font-style: italic;
  color: var(--vermilion);
  font-weight: 900;
}
.faq-a {
  margin: 12px 0 0 28px;
  font-size: 14px;
  line-height: 1.8;
  padding-left: 16px;
  border-left: 2px solid var(--vermilion);
}

/* Related articles */
.related {
  padding: 64px 56px;
  border-bottom: 1px solid var(--ink);
}
.related-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 24px;
}
.related h3 {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-size: 36px;
  letter-spacing: -0.03em;
  margin: 0;
}
.related h3 em { font-style: italic; color: var(--vermilion); }
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.related-card {
  border: 1px solid var(--ink);
  text-decoration: none;
  color: var(--ink);
  padding: 20px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 200ms ease;
}
.related-card:hover { transform: translateY(-4px); background: var(--ink); color: var(--paper); }
.related-card:hover .row-cat { background: var(--paper); color: var(--ink); }
.related-card .num {
  font-family: "Noto Sans JP", serif;
  font-style: italic;
  font-weight: 900;
  font-size: 48px;
  letter-spacing: -0.02em;
  line-height: 1;
  opacity: 0.5;
}
.related-card h4 {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.3;
}
.related-card .meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: auto;
}

/* AUTHOR PAGE */
.author-cover {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  border-bottom: 1px solid var(--ink);
  min-height: 540px;
}
.author-portrait {
  background: var(--ink);
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--ink);
}
.author-portrait-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  filter: contrast(1.05) saturate(0.95);
}
.author-portrait-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10,10,10,0.5) 100%);
}
.author-portrait-en {
  position: absolute;
  bottom: 24px;
  left: 32px;
  font-family: "Noto Sans JP", serif;
  font-style: italic;
  font-weight: 900;
  font-size: 80px;
  line-height: 0.86;
  color: var(--paper);
  letter-spacing: -0.04em;
  z-index: 2;
}
.author-portrait-mark {
  position: absolute;
  top: 24px;
  left: 24px;
  background: var(--vermilion);
  color: var(--paper);
  padding: 6px 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  font-weight: 700;
  text-transform: uppercase;
  z-index: 2;
}
.author-info {
  padding: 56px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.author-name {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-size: 88px;
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 0;
}
.author-role {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--vermilion);
}
.author-bio {
  font-size: 16px;
  line-height: 1.85;
  border-left: 4px solid var(--ink);
  padding-left: 16px;
  max-width: 540px;
  font-weight: 500;
}
.author-creed {
  font-family: "Noto Sans JP", serif;
  font-style: italic;
  font-weight: 900;
  font-size: 26px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--ink);
  border-top: 3px double var(--ink);
  border-bottom: 3px double var(--ink);
  padding: 16px 0;
}
.author-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--ink);
}
.author-stats > div {
  padding: 16px;
  border-right: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.author-stats > div:last-child { border-right: none; }
.author-stats .lab {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
}
.author-stats .val {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-size: 32px;
  letter-spacing: -0.03em;
  line-height: 1;
}
.author-expertise {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.author-expertise span {
  border: 1px solid var(--ink);
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.05em;
}

/* Colophon (footer) — reused minimal */
.colophon-mini {
  background: var(--ink);
  color: var(--paper);
  padding: 56px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 32px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  line-height: 1.8;
}
.colophon-mini > div > span {
  display: block;
  opacity: 0.6;
  font-size: 10px;
  margin-top: 4px;
}
.colophon-mini h6 {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0 0 12px;
  opacity: 0.5;
  color: var(--vermilion, #e74c3c);
}
.colophon-mini a {
  color: var(--paper);
  text-decoration: none;
  display: block;
  opacity: 0.85;
  font-size: 11px;
  padding: 1px 0;
}
.colophon-mini a:hover { opacity: 1; color: var(--cyan); }

/* ============ Article-type specific blocks ============ */

/* REVIEW — 5-axis score panel */
.review-summary {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
  margin: 32px 0;
  border: 1px solid var(--ink);
}
.review-scores {
  padding: 28px;
  border-right: 1px solid var(--ink);
  background: var(--paper);
}
.review-scores h5 {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink);
}
.review-row {
  display: grid;
  grid-template-columns: 84px 1fr 60px;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px dashed var(--ink);
}
.review-row:first-of-type { border-top: none; }
.review-row .axis {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-size: 15px;
}
.review-row .bar {
  height: 8px;
  background: var(--paper-warm);
  border: 1px solid var(--ink);
  position: relative;
  overflow: hidden;
}
.review-row .bar i {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: var(--vermilion);
  display: block;
}
.review-row .num {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 18px;
  text-align: right;
  color: var(--vermilion);
}
.review-row .cmt {
  grid-column: 1 / -1;
  font-size: 12px;
  line-height: 1.7;
  opacity: 0.75;
  padding-left: 100px;
  margin-top: -4px;
}
.review-overall {
  background: var(--ink);
  color: var(--paper);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.review-overall h6 {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
  margin: 0;
}
.review-overall .big {
  font-family: "Noto Sans JP", serif;
  font-style: italic;
  font-weight: 900;
  font-size: 88px;
  line-height: 1;
  color: var(--vermilion);
  letter-spacing: -0.04em;
}
.review-overall .big sup {
  font-size: 24px;
  opacity: 0.6;
  margin-left: 4px;
  vertical-align: super;
}
.review-overall .verdict {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-size: 17px;
  line-height: 1.5;
  border-top: 1px solid rgba(244,239,227,0.25);
  padding-top: 16px;
}
.svc-card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--ink);
  margin: 24px 0 32px;
  background: var(--paper-warm);
}
.svc-card > div {
  padding: 18px 20px;
  border-right: 1px solid var(--ink);
}
.svc-card > div:last-child { border-right: none; }
.svc-card .lab {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.6;
  display: block;
  margin-bottom: 4px;
}
.svc-card .val {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-size: 18px;
}

/* TUTORIAL — requirement strip + step accordion */
.tut-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--ink);
  margin: 24px 0 32px;
}
.tut-info > div {
  padding: 20px 24px;
  border-right: 1px solid var(--ink);
}
.tut-info > div:last-child { border-right: none; }
.tut-info h6 {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0 0 8px;
  opacity: 0.7;
}
.tut-info .v {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-size: 18px;
  line-height: 1.4;
}
.tut-req-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
}
.tut-req-list li {
  padding: 4px 0 4px 18px;
  position: relative;
  line-height: 1.5;
}
.tut-req-list li::before {
  content: "□";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--vermilion);
}
.tut-steps {
  margin: 24px 0;
  border-top: 3px double var(--ink);
  padding-top: 8px;
  counter-reset: tut;
}
.tut-step {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--ink);
  counter-increment: tut;
  position: relative;
}
.tut-step::before {
  content: "STEP " counter(tut, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 30px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  background: var(--ink);
  color: var(--paper);
  padding: 4px 8px;
}
.tut-step-num {
  font-family: "Noto Sans JP", serif;
  font-style: italic;
  font-weight: 900;
  font-size: 64px;
  line-height: 0.9;
  color: var(--vermilion);
  letter-spacing: -0.04em;
  padding-top: 20px;
  text-align: right;
}
.tut-step-body h4 {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-size: 22px;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
  line-height: 1.35;
}
.tut-step-body p { font-size: 15px; line-height: 1.8; margin: 0 0 10px; }
.tut-step-tip {
  background: var(--highlight);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  border-left: 3px solid var(--ink);
  display: inline-block;
}

/* OPINION / ESSAY — long-form reading */
.essay-cover {
  background: var(--ink);
  color: var(--paper);
  padding: 80px 56px 64px;
  border-bottom: 1px solid var(--ink);
  position: relative;
  overflow: hidden;
}
.essay-cover .label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 32px;
}
.essay-cover h1 {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-style: italic;
  font-size: 96px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin: 0 0 32px;
  max-width: 900px;
}
.essay-cover h1 em { color: var(--vermilion); font-style: italic; }
.essay-cover .deck {
  font-family: "Noto Sans JP", serif;
  font-size: 22px;
  line-height: 1.7;
  max-width: 720px;
  opacity: 0.92;
}
.essay-cover .deco {
  position: absolute;
  font-family: "Noto Sans JP", serif;
  font-style: italic;
  font-weight: 900;
  font-size: 480px;
  line-height: 0.9;
  color: rgba(244,239,227,0.04);
  bottom: -120px;
  right: -40px;
  user-select: none;
  pointer-events: none;
}
.essay-byline {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(244,239,227,0.25);
  max-width: 600px;
}
.essay-byline .av {
  width: 64px; height: 64px;
  border-radius: 50%;
  background-size: cover;
  background-position: center top;
  border: 1px solid var(--paper);
}
.essay-byline .info { flex: 1; }
.essay-byline .nm {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-size: 18px;
}
.essay-byline .ro {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-top: 4px;
}
.essay-body {
  max-width: 720px;
  margin: 64px auto;
  padding: 0 32px;
  font-family: "Noto Sans JP", serif;
  font-size: 18px;
  line-height: 2.0;
}
.essay-body p { margin: 0 0 28px; }
.essay-body p.dropcap::first-letter {
  font-size: 110px;
  font-weight: 900;
  font-style: italic;
  float: left;
  line-height: 0.85;
  margin: 8px 16px 0 -8px;
  color: var(--vermilion);
  font-family: "Noto Sans JP", serif;
}
.essay-body h2 {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-style: italic;
  font-size: 38px;
  letter-spacing: -0.03em;
  line-height: 1.25;
  margin: 56px 0 24px;
  position: relative;
  padding-left: 24px;
  border-left: 4px solid var(--vermilion);
}
.essay-vquote {
  margin: 56px auto;
  padding: 48px 56px;
  background: var(--paper-warm);
  border-top: 3px double var(--ink);
  border-bottom: 3px double var(--ink);
  text-align: center;
}
.essay-vquote q {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-style: italic;
  font-size: 36px;
  line-height: 1.45;
  letter-spacing: -0.02em;
  display: block;
  max-width: 620px;
  margin: 0 auto 16px;
}
.essay-vquote q::before, .essay-vquote q::after { content: ""; }
.essay-vquote .attr {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* DATA — metric grid + bar chart */
.data-metrics {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid var(--ink);
  margin: 24px 0 32px;
  background: var(--paper);
}
.data-metric {
  padding: 24px 18px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.data-metric:nth-child(6n) { border-right: none; }
.data-metric:nth-last-child(-n+6) { border-bottom: none; }
.data-metric h6 {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0 0 8px;
  opacity: 0.65;
}
.data-metric .val {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-style: italic;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--vermilion);
}
.data-metric .unit {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  margin-left: 4px;
  opacity: 0.7;
  color: var(--ink);
  font-weight: 500;
}
.data-chart {
  margin: 32px 0;
  border: 1px solid var(--ink);
  padding: 32px 36px;
  background: var(--paper);
}
.data-chart h5 {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink);
}
.data-bar-row {
  display: grid;
  grid-template-columns: 100px 1fr 60px;
  gap: 16px;
  align-items: center;
  padding: 10px 0;
}
.data-bar-row .label {
  font-family: "Noto Sans JP", serif;
  font-weight: 700;
  font-size: 14px;
}
.data-bar-row .bar-track {
  height: 28px;
  background: var(--paper-warm);
  border: 1px solid var(--ink);
  position: relative;
}
.data-bar-row .bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--vermilion);
}
.data-bar-row .bar-fill.alt-1 { background: var(--ink); }
.data-bar-row .bar-fill.alt-2 { background: var(--cyan); }
.data-bar-row .bar-fill.alt-3 { background: #1a8a6a; }
.data-bar-row .bar-fill.alt-4 { background: #FFB800; }
.data-bar-row .bar-fill.alt-5 { background: #888; }
.data-bar-row .v {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 16px;
  text-align: right;
}
.data-source {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--ink);
}

/* QUICK-ANSWER — answer-first hero */
.qa-hero {
  background: var(--paper-warm);
  border-bottom: 1px solid var(--ink);
  padding: 56px 56px 48px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 56px;
  align-items: center;
}
.qa-hero .qa-q {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-size: 44px;
  line-height: 1.25;
  letter-spacing: -0.03em;
}
.qa-hero .qa-q::before {
  content: "Q.";
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--vermilion);
  margin-bottom: 12px;
}
.qa-hero .qa-a {
  background: var(--ink);
  color: var(--paper);
  padding: 36px 36px 32px;
  border-radius: 0;
  position: relative;
}
.qa-hero .qa-a::before {
  content: "A.";
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--cyan);
  margin-bottom: 12px;
}
.qa-hero .qa-a-text {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-size: 26px;
  line-height: 1.55;
  letter-spacing: -0.01em;
}
.qa-hero .qa-meta {
  display: flex;
  gap: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(244,239,227,0.25);
}

/* NEWS — breaking marker, timeline-style bullets */
.news-strip {
  background: var(--vermilion);
  color: var(--paper);
  padding: 12px 56px;
  display: flex;
  gap: 18px;
  align-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  border-bottom: 1px solid var(--ink);
}
.news-strip .pulse {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--paper);
  animation: news-pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes news-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}
.news-strip .ts { margin-left: auto; opacity: 0.85; }
.news-bullets {
  list-style: none;
  padding: 0;
  margin: 28px 0;
  border-top: 1px solid var(--ink);
}
.news-bullets li {
  padding: 18px 0 18px 60px;
  border-bottom: 1px solid var(--ink);
  position: relative;
  font-size: 16px;
  line-height: 1.7;
  font-family: "Noto Sans JP", serif;
}
.news-bullets li::before {
  content: counter(news, decimal-leading-zero);
  counter-increment: news;
  position: absolute;
  left: 0; top: 22px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  background: var(--ink);
  color: var(--paper);
  padding: 4px 8px;
  font-weight: 700;
}
.news-bullets { counter-reset: news; }
.news-source {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  margin-top: 24px;
  padding: 16px 20px;
  background: var(--paper-warm);
  border-left: 4px solid var(--vermilion);
}

/* SERIES-CHAPTER — progress + nav */
.series-banner {
  background: var(--ink);
  color: var(--paper);
  padding: 24px 56px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  border-bottom: 1px solid var(--ink);
}
.series-banner .lab {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 6px;
}
.series-banner .ttl {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-style: italic;
  font-size: 26px;
  letter-spacing: -0.02em;
}
.series-banner .progress {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  display: flex;
  align-items: center;
  gap: 12px;
}
.series-banner .progress .dots {
  display: flex; gap: 6px;
}
.series-banner .progress .dots span {
  width: 28px; height: 4px;
  background: rgba(244,239,227,0.25);
  display: block;
}
.series-banner .progress .dots span.done { background: var(--cyan); }
.series-banner .progress .dots span.now { background: var(--vermilion); }
.series-chapter-list {
  margin: 32px 0;
  border-top: 1px solid var(--ink);
}
.series-chapter-list a, .series-chapter-list .ci {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--ink);
  align-items: center;
  text-decoration: none;
  color: var(--ink);
}
.series-chapter-list .num {
  font-family: "Noto Sans JP", serif;
  font-style: italic;
  font-weight: 900;
  font-size: 36px;
  letter-spacing: -0.04em;
  color: var(--vermilion);
}
.series-chapter-list .ttl {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.series-chapter-list .st {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
}
.series-chapter-list .ci.current {
  background: var(--paper-warm);
  margin: 0 -24px;
  padding-left: 24px;
  padding-right: 24px;
}
.series-chapter-list .ci.current .st { color: var(--vermilion); opacity: 1; }
.series-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--ink);
  margin: 48px 0 32px;
}
.series-nav a {
  padding: 28px;
  text-decoration: none;
  color: var(--ink);
  display: block;
  border-right: 1px solid var(--ink);
  transition: background 150ms;
}
.series-nav a:last-child { border-right: none; text-align: right; }
.series-nav a:hover { background: var(--paper-warm); }
.series-nav .dir {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--vermilion);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.series-nav .ttl {
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* ──────────────────────────────────────────────────────────────────────
   .sr-only — visually hidden but accessible to screen readers.
   Used by the "本文へスキップ" skip link at the top of every article.
   Becomes briefly visible when focused via Tab key (keyboard-only users).
   ────────────────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only:focus,
.sr-only:focus-visible {
  position: fixed;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  padding: 8px 14px;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--ink);
  color: var(--paper);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  z-index: 9999;
  outline: 2px solid var(--vermilion);
  outline-offset: 2px;
}

/* ──────────────────────────────────────────────────────────────────────
   art-fig — inline editorial figure (gpt-image-2 generated photographs)
   used by article-comparison/review/tutorial templates inside .art-body
   ────────────────────────────────────────────────────────────────────── */
.art-fig {
  margin: 36px 0 28px;
  padding: 0;
  position: relative;
}
.art-fig picture,
.art-fig img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ink);
  background: var(--paper-warm);
}
.art-fig-cap {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 12px;
  padding: 10px 0 0;
  border-top: 1px solid var(--ink);
  font-family: "Noto Serif JP", serif;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.art-fig-num {
  flex: 0 0 auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vermilion);
  padding: 3px 6px;
  border: 1px solid var(--vermilion);
  white-space: nowrap;
  margin-top: 1px;
}
@media (max-width: 720px) {
  .art-fig { margin: 24px 0 20px; }
  .art-fig-cap { font-size: 12px; gap: 10px; }
  .art-fig-num { font-size: 9px; padding: 2px 5px; }
}

/* ──────────────────────────────────────────────────────────────────────
   Responsive breakpoints for cynix.jp magazine layout.
   Spec:
     ≤  720      Phone — full vertical stack
     721-1100    Tablet — TOC + body (2-col), aside drops to row 2 (3-col)
     1101-1680   Desktop default — TOC + body + aside (3-col, 220/1fr/280)
     ≥ 1681      Wide / ultra-wide — content capped at 1680px, centered.
                 Masthead and colophon remain full-bleed (magazine cover effect).
   ────────────────────────────────────────────────────────────────────── */

/* Tablet (721-1100) ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .art-grid {
    grid-template-columns: 200px 1fr;
    gap: 28px;
    padding: 48px 32px;
  }
  .art-toc { position: sticky; top: 80px; }
  .art-aside {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 8px;
  }
  .art-cover { grid-template-columns: 1fr; }
  .art-cover-text {
    border-right: none;
    border-bottom: 1px solid var(--ink);
    padding: 48px 36px;
  }
  .art-cover-vis { min-height: 360px; }
  .art-cover-deco { font-size: 240px; }
}

/* Phone (≤720) ──────────────────────────────────────────────── */
@media (max-width: 720px) {
  .art-grid {
    grid-template-columns: 1fr;
    padding: 24px 16px;
    gap: 24px;
  }
  .art-toc {
    position: static;
    border: 1px solid var(--ink);
    padding: 16px;
    background: var(--paper-warm);
  }
  .art-toc h5 { font-size: 13px; }
  .art-aside {
    grid-column: auto;            /* override tablet 1/-1 */
    grid-template-columns: 1fr;   /* override tablet 3-col */
  }
  .art-cover-text { padding: 32px 20px; }
  .art-cover-vis { min-height: 240px; }
  .art-cover-deco { font-size: 140px; }
  .art-h { font-size: 38px; line-height: 1.05; }
  .art-meta-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 18px;
  }
  .art-meta-bar .left,
  .art-meta-bar .right { flex-wrap: wrap; gap: 10px; }
  .art-pr {
    padding: 14px 18px;
    font-size: 12px;
    line-height: 1.6;
    align-items: flex-start;
  }
  .art-byline {
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 0 12px;
  }
  .art-byline-stats { width: 100%; text-align: left; }
  .art-share { flex-wrap: wrap; gap: 6px; }
  .art-body h2 { font-size: 28px; line-height: 1.3; }
  .art-body h3 { font-size: 18px; }
  .art-body p { font-size: 15px; line-height: 1.85; }
  .art-body p.dropcap::first-letter { font-size: 64px; }

  .rank-podium { grid-template-columns: 1fr; }
  .rank-podium .rank-card {
    border-right: none !important;
    border-bottom: 1px solid var(--ink);
  }
  .rank-podium .rank-card:last-child { border-bottom: none; }
  .compare-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .proscons { grid-template-columns: 1fr; }
  .proscons .proscons-col {
    border-right: none !important;
    border-bottom: 1px solid var(--ink);
  }
  .proscons .proscons-col:last-child { border-bottom: none; }
  .related-grid { grid-template-columns: 1fr; }
  .related-grid .related-card {
    border-right: none !important;
    border-bottom: 1px solid var(--ink);
  }
  .related-grid .related-card:last-child { border-bottom: none; }
  .colophon-mini {
    grid-template-columns: repeat(2, 1fr);
    padding: 24px 20px;
    gap: 20px 16px;
  }

  .masthead-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 10px 16px;
    font-size: 9px;
    letter-spacing: 0.16em;
  }
  .masthead-top .right { flex-wrap: wrap; gap: 12px; }
  .masthead-main { grid-template-columns: 1fr; }
  .masthead-tagline,
  .masthead-meta {
    border-right: none !important;
    border-bottom: 1px solid var(--ink);
    padding: 14px 16px;
    text-align: left;
  }
  .masthead-logo {
    padding: 28px 16px;
    font-size: 64px;
    border-right: none;
    border-bottom: 1px solid var(--ink);
  }
  .masthead-nav { grid-template-columns: repeat(2, 1fr); }
  .masthead-nav a {
    padding: 12px 14px;
    font-size: 11px;
    border-bottom: 1px solid var(--ink);
  }
  .masthead-nav a:nth-child(2n+1) { border-right: 1px solid var(--ink); }
  .masthead-nav a:nth-last-child(-n+2) { border-bottom: none; }

  .art-aside-cv,
  .art-aside-card { padding: 18px; }
}

/* ──────────────────────────────────────────────────────────────────────
   Wide screens (≥1281): full-bleed vs constrained content zones.

   Full-bleed (always 100% viewport — magazine cover / social-proof feel):
       masthead, art-cover, cv-proof, colophon-mini

   Constrained (capped & centered — reading + decision zone):
       cy-crumb, art-meta-bar, art-pr, art-grid, art-citations, related
       cap = 1380px → body line length ≈ 700px (optimal Japanese reading)

   art-cover stays full-bleed but its TEXT column is capped at 760px
   and its left padding tracks the same center-line as the constrained
   zone, so the article H1 and the body share a visual gutter.
   ────────────────────────────────────────────────────────────────────── */
@media (min-width: 1281px) {
  /* Constrained = inside-the-article reading + decision zone only.
     Navigation chrome (cy-crumb / art-meta-bar / art-pr) stays full-bleed
     like the masthead, since users perceive them as page-level UI rather
     than article body. */
  .mag.mag-article > .art-grid,
  .mag.mag-article > .art-citations,
  .mag.mag-article > .related {
    max-width: 1380px;
    margin-left: auto;
    margin-right: auto;
  }
  /* art-cover stays full-bleed but uses a 3-column grid so the left gutter,
     the text column (capped 712), and the hero column are independent.
     The col-1 width tracks the same calc as the centered body cap, so the
     text column's left edge lines up exactly with .cy-crumb / .art-grid. */
  .art-cover {
    grid-template-columns:
      max(56px, calc((100vw - 1380px) / 2))
      minmax(auto, 712px)
      1fr;
  }
  .art-cover-text {
    grid-column: 2;
    padding-left: 0;
    padding-right: 48px;
  }
  .art-cover-vis {
    grid-column: 3;
  }
  /* Inner caps as belt-and-suspenders, in case grid track interpretation
     differs across engines. */
  .art-cover-text > .art-mark,
  .art-cover-text > .art-h,
  .art-cover-text > .art-deck,
  .art-cover-text > .art-byline,
  .art-cover-text > .art-share {
    max-width: 712px;
  }
}