/* ============================================================
   AUTOVJCLUB — Editorial content pages
   Design system based on:
   - Modular scale: 1.25 (major third)
   - Baseline grid: 8px
   - Body measure: 42em (≈42 Japanese chars)
   - Line-height: 1.85 body / 1.3 headings
   ============================================================ */

:root {
  /* Palette */
  --lp-void: #06080c;
  --lp-deep: #0a0e16;
  --lp-ink: #050709;
  --lp-panel: rgba(15, 21, 32, 0.7);
  --lp-panel-strong: rgba(17, 25, 37, 0.94);
  --lp-accent: #00e5c8;
  --lp-accent-soft: rgba(0, 229, 200, 0.10);
  --lp-accent-vivid: #2dffe0;
  --lp-warm: #ff6b4a;
  --lp-border: rgba(255, 255, 255, 0.08);
  --lp-border-strong: rgba(255, 255, 255, 0.16);
  --lp-line: rgba(0, 229, 200, 0.28);
  --lp-text: #d6dce6;
  --lp-text-dim: #8b97a9;
  --lp-text-bright: #f1f5fa;

  /* Typography stack */
  --font-hero: 'Anton', 'Zen Kaku Gothic New', sans-serif;
  --font-display: 'Oxanium', sans-serif;
  --font-body: 'DM Sans', 'Noto Sans JP', sans-serif;
  --font-jp: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  /* Body-only JP stack — drops the heavy Zen Kaku display face for prose */
  --font-jp-body: 'DM Sans', 'Noto Sans JP', system-ui, sans-serif;

  /* Modular scale 1.25 (major third), base = 16px */
  --text-2xs: 0.75rem;    /* 12px — caption / kicker */
  --text-xs:  0.875rem;   /* 14px — small / meta */
  --text-sm:  0.9375rem;  /* 15px — card desc */
  --text-base: 1rem;      /* 16px — body */
  --text-md:  1.125rem;   /* 18px — lede / h3 */
  --text-lg:  1.25rem;    /* 20px — section-open */
  --text-xl:  1.5rem;     /* 24px — h2 small */
  --text-2xl: 1.875rem;   /* 30px — h2 large */
  --text-3xl: 3rem;       /* 48px — h1 small */
  --text-4xl: clamp(2.75rem, 6vw, 4.75rem); /* h1 fluid */

  /* Line heights */
  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-body:  1.85;

  /* Baseline grid (8px) */
  --s-1:  0.5rem;   /*  8 */
  --s-2:  1rem;     /* 16 */
  --s-3:  1.5rem;   /* 24 */
  --s-4:  2rem;     /* 32 */
  --s-5:  3rem;     /* 48 */
  --s-6:  4rem;     /* 64 */
  --s-7:  6rem;     /* 96 */
  --s-8:  8rem;     /* 128 */

  /* Layout */
  --measure-text: 48em;   /* ~48 zenkaku chars for paragraphs */
  --measure-lede: 38em;   /* ~38 chars for lede / hero-lead */
  --shell-max: 1240px;
  --aside-col: 240px;

  /* Misc */
  --radius-card: 18px;
  --radius-pill: 999px;
  --shadow-soft: 0 12px 36px rgba(0, 0, 0, 0.28);
  --shadow-hover: 0 20px 52px rgba(0, 0, 0, 0.38);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(ellipse at 10% 0%, rgba(0, 229, 200, 0.08), transparent 40%),
    radial-gradient(ellipse at 90% 4%, rgba(255, 107, 74, 0.06), transparent 32%),
    linear-gradient(180deg, var(--lp-void) 0%, var(--lp-deep) 55%, var(--lp-ink) 100%);
  background-attachment: fixed;
  color: var(--lp-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  font-feature-settings: "pkna" 1;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url('/noise.png');
  background-size: 180px;
  opacity: 0.028;
  mix-blend-mode: overlay;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--lp-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.content-root {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   Header
   ============================================================ */

.content-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  background: rgba(6, 8, 12, 0.78);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-bottom: 1px solid var(--lp-border);
}

.content-logo {
  position: relative;
  padding-left: 1rem;
  font-family: var(--font-hero);
  font-size: 1rem;
  letter-spacing: 0.2em;
  color: var(--lp-text-bright);
}

.content-logo::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lp-accent);
  box-shadow: 0 0 10px var(--lp-accent);
  transform: translateY(-50%);
  animation: pulse-dot 2.4s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
  50%      { opacity: 0.5; transform: translateY(-50%) scale(0.8); }
}

.content-nav,
.content-actions,
.footer-links {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.content-nav a {
  position: relative;
  padding: 4px 0;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--lp-text-dim);
  transition: color 0.2s ease;
}

.content-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -3px;
  height: 1px;
  background: var(--lp-accent);
  transition: right 0.25s ease;
}

.content-nav a:hover,
.footer-links a:hover,
.breadcrumbs a:hover {
  color: var(--lp-text-bright);
}

.content-nav a:hover::after,
.content-nav a[aria-current="page"]::after {
  right: 0;
}

.content-nav a[aria-current="page"] {
  color: var(--lp-text-bright);
}

.content-nav a[aria-current="page"]::after {
  height: 2px;
  background: var(--lp-accent);
  box-shadow: 0 0 8px rgba(0, 229, 200, 0.45);
}

.footer-links a,
.breadcrumbs a {
  color: var(--lp-text-dim);
  transition: color 0.2s ease;
}

.primary-btn,
.ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.2s ease;
}

.primary-btn {
  color: #041514;
  background: linear-gradient(135deg, var(--lp-accent) 0%, var(--lp-accent-vivid) 100%);
}

.primary-btn:hover {
  box-shadow: 0 0 28px rgba(0, 229, 200, 0.42);
  transform: translateY(-1px);
}

.ghost-btn {
  border: 1px solid var(--lp-border-strong);
  color: var(--lp-text-bright);
}

.ghost-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--lp-accent);
}

/* ============================================================
   Shell
   ============================================================ */

.content-main {
  flex: 1;
  padding: var(--s-5) var(--s-4) var(--s-7);
}

.content-shell {
  max-width: var(--shell-max);
  margin: 0 auto;
}

.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-bottom: var(--s-4);
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.breadcrumbs a {
  padding: 2px 0;
}

.breadcrumb-sep {
  color: var(--lp-text-dim);
  opacity: 0.4;
}

/* ============================================================
   Hero — Title + Deck
   ============================================================ */

.content-hero {
  position: relative;
  padding: var(--s-6) var(--s-5) var(--s-5);
  border-top: 1px solid var(--lp-border);
  border-bottom: 1px solid var(--lp-border);
  background:
    linear-gradient(180deg, rgba(0, 229, 200, 0.045), transparent 55%),
    linear-gradient(180deg, rgba(15, 21, 32, 0.6), rgba(10, 14, 22, 0.35));
  overflow: hidden;
}

.content-hero::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -60px;
  width: 420px;
  height: 420px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(0, 229, 200, 0.15), transparent 55%);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lp-accent);
}

.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--lp-accent);
}

.content-hero h1 {
  position: relative;
  max-width: 18ch;
  margin: 0 0 var(--s-3);
  color: var(--lp-text-bright);
  font-size: var(--text-4xl);
  font-family: var(--font-hero);
  line-height: var(--lh-tight);
  letter-spacing: 0.015em;
  text-wrap: balance;
}

.hero-subtitle {
  position: relative;
  max-width: var(--measure-lede);
  margin: calc(-1 * var(--s-2)) 0 var(--s-3);
  color: var(--lp-text-bright);
  font-family: var(--font-jp);
  font-size: var(--text-md);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: 0.02em;
  opacity: 0.85;
  text-wrap: balance;
}

.hero-lead {
  position: relative;
  max-width: var(--measure-lede);
  margin: 0;
  color: var(--lp-text-bright);
  font-family: var(--font-jp-body);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.04em;
}

/* ===== Article meta — dates + author badge row ===== */

.article-dates {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--lp-border);
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  color: var(--lp-text-dim);
  text-transform: uppercase;
}

.article-date {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.article-date-label {
  color: var(--lp-accent);
  font-weight: 700;
  letter-spacing: 0.18em;
}

.article-date time,
.article-date span:last-child {
  color: var(--lp-text-bright);
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  text-transform: none;
}

.article-date time {
  font-variant-numeric: tabular-nums;
}

/* ===== Page meta — time / difficulty / audience strip ===== */

.page-meta {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  margin: var(--s-4) 0 0;
  padding: 0;
  background: var(--lp-border);
  border: 1px solid var(--lp-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.page-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s-2) var(--s-3);
  background: rgba(10, 14, 22, 0.92);
}

.page-meta-item dt {
  margin: 0;
  color: var(--lp-accent);
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.page-meta-item dd {
  margin: 0;
  color: var(--lp-text-bright);
  font-family: var(--font-jp);
  font-size: var(--text-sm);
  line-height: 1.5;
  letter-spacing: 0.015em;
  text-wrap: balance;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Eyecatch banner — between hero and main content
   ============================================================ */

.content-eyecatch {
  position: relative;
  margin: var(--s-5) 0 0;
  padding: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--lp-border);
  box-shadow: var(--shadow-soft);
  line-height: 0;
}

.content-eyecatch::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 60%, rgba(6, 8, 12, 0.35) 100%),
    linear-gradient(90deg, rgba(0, 229, 200, 0.06), transparent 40%);
  mix-blend-mode: normal;
}

.content-eyecatch img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

@media print {
  .content-eyecatch {
    display: none;
  }
}

/* ============================================================
   Layout grid — TOC + Article
   ============================================================ */

.content-layout {
  display: grid;
  grid-template-columns: var(--aside-col) minmax(0, 1fr);
  gap: var(--s-6);
  margin-top: var(--s-6);
}

/* ===== TOC — minimal editorial side-rail ===== */

.content-aside {
  position: relative;
  align-self: start;
}

.toc-card {
  position: sticky;
  top: 96px;
  padding: 0;
  border: none;
  background: none;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.toc-card::-webkit-scrollbar {
  width: 3px;
}

.toc-card::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
}

.toc-title {
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--lp-border);
  color: var(--lp-text-dim);
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.toc-card ul {
  counter-reset: toc;
  margin: 0;
  padding: 0;
  list-style: none;
}

.toc-card li {
  counter-increment: toc;
}

.toc-card li + li {
  margin-top: 2px;
}

.toc-card li a {
  position: relative;
  display: block;
  padding: 10px 0 10px 36px;
  font-family: var(--font-jp);
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--lp-text-dim);
  border-left: 2px solid transparent;
  margin-left: -2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.toc-card li a::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 12px;
  top: 11px;
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--lp-text-dim);
  opacity: 0.5;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.toc-card li a:hover,
.toc-card li a.is-active {
  color: var(--lp-text-bright);
  border-left-color: var(--lp-accent);
}

.toc-card li a:hover::before,
.toc-card li a.is-active::before {
  color: var(--lp-accent);
  opacity: 1;
}

.toc-card li a.is-active {
  background: linear-gradient(90deg, rgba(0, 229, 200, 0.08), transparent 70%);
}

/* ============================================================
   Article — editorial content, no boxing
   ============================================================ */

.content-article {
  counter-reset: sec;
  display: flex;
  flex-direction: column;
}

.content-section {
  counter-increment: sec;
  position: relative;
  padding: var(--s-6) 0 0;
  border: none;
  background: none;
  box-shadow: none;
}

.content-section:first-child {
  padding-top: 0;
}

/* H2 — kicker number above, strong heading, measured margin */

.content-section h2 {
  position: relative;
  max-width: var(--measure-text);
  margin: 0 0 var(--s-4);
  color: var(--lp-text-bright);
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.content-section h2::before {
  content: counter(sec, decimal-leading-zero);
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--lp-accent);
}

/* Magazine-style section tick — short accent rule above subsequent H2s */
.content-section + .content-section {
  position: relative;
}

.content-section + .content-section:not(.related-section)::after {
  content: '';
  position: absolute;
  top: var(--s-4);
  left: 0;
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, var(--lp-accent), transparent);
  opacity: 0.55;
  pointer-events: none;
}

/* H3 */

.content-section h3 {
  max-width: var(--measure-text);
  margin: 0 0 var(--s-1);
  color: var(--lp-text-bright);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: var(--text-md);
  line-height: 1.4;
  letter-spacing: 0.012em;
  text-wrap: balance;
}

/* Paragraph — measured column, generous leading */

.content-section p {
  max-width: var(--measure-text);
  margin: 0;
  color: var(--lp-text);
  font-family: var(--font-jp-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.95;
  letter-spacing: 0.04em;
  text-wrap: pretty;
}

.content-section p + p {
  margin-top: var(--s-3);
}

.content-section p strong,
.content-section li strong,
.note-item dd strong,
.callout-body strong,
.faq-item p strong {
  color: var(--lp-text-bright);
  font-weight: 700;
  background-image: linear-gradient(180deg, transparent 62%, rgba(0, 229, 200, 0.18) 62%, rgba(0, 229, 200, 0.18) 92%, transparent 92%);
  padding: 0 2px;
  border-radius: 1px;
}

/* Lede — first paragraph of first section reads as opening deck */

.content-article > .content-section:first-child > p:first-of-type {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--lp-text-bright);
  line-height: 1.85;
}

/* ============================================================
   Bullet list — editorial, flush with body column
   ============================================================ */

.content-list {
  max-width: var(--measure-text);
  margin: 0;
  padding: 0;
  list-style: none;
}

.content-list li {
  position: relative;
  padding: 10px 0 10px 26px;
  font-family: var(--font-jp-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.85;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.content-list li:last-child {
  border-bottom: none;
}

.content-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 21px;
  width: 14px;
  height: 1px;
  background: var(--lp-accent);
  opacity: 0.7;
}

/* ============================================================
   Steps — numbered, typography-first (no heavy cards)
   ============================================================ */

.step-list {
  counter-reset: step;
  max-width: var(--measure-text);
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.step-item {
  counter-increment: step;
  position: relative;
  padding: var(--s-3) 0 var(--s-3) 70px;
  border-bottom: 1px solid var(--lp-border);
}

.step-item:first-child {
  padding-top: var(--s-2);
}

.step-item:last-child {
  border-bottom: none;
}

.step-item::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--s-3);
  font-family: var(--font-hero);
  font-size: 2.25rem;
  line-height: 0.95;
  color: var(--lp-accent);
  letter-spacing: 0.02em;
}

.step-item:first-child::before {
  top: var(--s-2);
}

.step-item h3 {
  margin: 0 0 6px;
  font-size: var(--text-md);
}

.step-item .step-desc {
  max-width: none;
  margin: 0 0 var(--s-2);
  color: var(--lp-text-dim);
  font-size: var(--text-sm);
  line-height: 1.8;
}

.step-detail {
  margin: var(--s-2) 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.step-detail-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: var(--s-2);
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(10, 14, 22, 0.55);
  border-left: 2px solid transparent;
}

.step-detail-row dt {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-text-dim);
  line-height: 1.5;
  padding-top: 2px;
}

.step-detail-row dd {
  margin: 0;
  color: var(--lp-text);
  font-family: var(--font-jp-body);
  font-weight: 300;
  font-size: var(--text-sm);
  line-height: 1.85;
  letter-spacing: 0.04em;
}

.step-detail-action {
  border-left-color: var(--lp-accent);
}
.step-detail-action dt {
  color: var(--lp-accent);
}

.step-detail-check {
  border-left-color: #7be7ff;
}
.step-detail-check dt {
  color: #7be7ff;
}

.step-detail-pitfall {
  border-left-color: var(--lp-warm);
  background: rgba(40, 16, 12, 0.4);
}
.step-detail-pitfall dt {
  color: var(--lp-warm);
}

/* ============================================================
   Callout — inline tip/warn/note
   ============================================================ */

.content-section-callout {
  counter-increment: none !important;
}

.callout {
  position: relative;
  max-width: var(--measure-text);
  margin: 0;
  padding: var(--s-3) var(--s-3) var(--s-3) calc(var(--s-3) + 16px);
  border-radius: var(--radius-card);
  border: 1px solid var(--lp-border);
  background: rgba(10, 14, 22, 0.55);
}

.callout::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 2px;
  background: var(--lp-accent);
}

.callout-tip::before { background: var(--lp-accent); }
.callout-warn::before { background: var(--lp-warm); }
.callout-note::before { background: #7be7ff; }

.callout-title {
  margin: 0 0 6px;
  color: var(--lp-text-bright);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: var(--text-md);
  letter-spacing: 0.012em;
  text-wrap: balance;
}

.callout-body {
  margin: 0;
  max-width: none !important;
  color: var(--lp-text);
  font-family: var(--font-jp-body);
  font-weight: 300;
  font-size: var(--text-sm);
  line-height: 1.9;
  letter-spacing: 0.04em;
  text-wrap: pretty;
}

/* ============================================================
   Checklist — interactive first-night list
   ============================================================ */

.checklist-intro {
  max-width: var(--measure-text);
  margin: 0 0 var(--s-3);
  color: var(--lp-text-dim);
  font-family: var(--font-jp-body);
  font-weight: 300;
  font-size: var(--text-sm);
  line-height: 1.85;
  letter-spacing: 0.04em;
}

.checklist {
  counter-reset: check;
  max-width: var(--measure-text);
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist-item {
  counter-increment: check;
  border-bottom: 1px solid var(--lp-border);
  transition: background 0.2s ease;
}

.checklist-item:last-child {
  border-bottom: none;
}

.checklist-item label {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: baseline;
  gap: 12px;
  padding: 12px 4px;
  cursor: pointer;
  user-select: none;
}

.checklist-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.checklist-box {
  position: relative;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 1.5px solid var(--lp-border-strong);
  border-radius: 5px;
  background: rgba(10, 14, 22, 0.55);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.checklist-box::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--lp-void);
  border-bottom: 2px solid var(--lp-void);
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform 0.18s ease;
}

.checklist-item.is-checked .checklist-box {
  background: var(--lp-accent);
  border-color: var(--lp-accent);
}

.checklist-item.is-checked .checklist-box::after {
  transform: rotate(45deg) scale(1);
}

.checklist-item input:focus-visible + .checklist-box {
  outline: 2px solid var(--lp-accent);
  outline-offset: 3px;
}

.checklist-text {
  color: var(--lp-text);
  font-family: var(--font-jp-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.85;
  letter-spacing: 0.04em;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.checklist-item.is-checked .checklist-text {
  color: var(--lp-text-dim);
  text-decoration: line-through;
  text-decoration-color: rgba(0, 229, 200, 0.5);
  text-decoration-thickness: 1.5px;
  opacity: 0.78;
}

/* ============================================================
   CTA card — inline conversion block
   ============================================================ */

.content-section-cta {
  counter-increment: none !important;
}

.cta-card {
  max-width: var(--measure-text);
  margin: var(--s-6) 0 0;
  padding: var(--s-4) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  border-radius: var(--radius-card);
  background:
    radial-gradient(ellipse at top right, rgba(0, 229, 200, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(16, 24, 36, 0.9), rgba(10, 14, 22, 0.9));
  border: 1px solid var(--lp-line);
  box-shadow: var(--shadow-soft);
}

.cta-title {
  margin: 0;
  color: var(--lp-text-bright);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  letter-spacing: 0.015em;
}

.cta-desc {
  margin: 0;
  max-width: none !important;
  color: var(--lp-text);
  font-family: var(--font-jp-body);
  font-weight: 300;
  font-size: var(--text-sm);
  line-height: 1.9;
  letter-spacing: 0.04em;
}

.cta-button {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--lp-accent) 0%, var(--lp-accent-vivid) 100%);
  color: #041514;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}

.cta-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 32px rgba(0, 229, 200, 0.45);
}

.cta-button span {
  transition: transform 0.2s ease;
}

.cta-button:hover span {
  transform: translateX(3px);
}

/* ============================================================
   Author bio
   ============================================================ */

.author-bio {
  margin-top: var(--s-6);
  padding: var(--s-3) var(--s-4);
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  border-radius: var(--radius-card);
  border: 1px solid var(--lp-border);
  background: rgba(10, 14, 22, 0.55);
  max-width: var(--measure-text);
}

.author-avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  overflow: hidden;
}

.author-avatar img,
.author-avatar svg {
  width: 100%;
  height: 100%;
  display: block;
}

.author-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.author-name {
  color: var(--lp-text-bright);
  font-family: var(--font-jp);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.author-desc {
  margin: 0;
  max-width: none !important;
  color: var(--lp-text-dim);
  font-family: var(--font-jp-body);
  font-weight: 300;
  font-size: var(--text-xs);
  line-height: 1.85;
  letter-spacing: 0.04em;
}

/* ============================================================
   Notes — tip list (title + body explanation, editorial)
   ============================================================ */

.note-list {
  max-width: var(--measure-text);
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.note-item {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--lp-border);
}

.note-item:first-child {
  padding-top: var(--s-1);
}

.note-item:last-child {
  border-bottom: none;
}

.note-item dt {
  position: relative;
  margin: 0 0 10px;
  padding-left: 18px;
  color: var(--lp-text-bright);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: var(--text-md);
  line-height: 1.5;
  letter-spacing: 0.012em;
  text-wrap: balance;
}

.note-item dt::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lp-accent);
  box-shadow: 0 0 0 3px rgba(0, 229, 200, 0.12);
  opacity: 0.85;
}

.note-item dd {
  margin: 0;
  padding-left: 18px;
  color: var(--lp-text);
  font-family: var(--font-jp-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.95;
  letter-spacing: 0.04em;
  text-wrap: pretty;
}

.note-item dd > p {
  margin: 0;
}

.note-item dd > p + p {
  margin-top: var(--s-2);
}

.note-item dd > ul {
  margin: var(--s-2) 0 0;
  padding-left: var(--s-4);
}

.note-item dd > ul li {
  margin-bottom: var(--s-1);
}

/* ============================================================
   Card grid — navigation affordances, stay inside column
   ============================================================ */

.card-grid {
  counter-reset: card;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.content-card {
  counter-increment: card;
  position: relative;
  display: block;
  height: 100%;
  padding: var(--s-3) var(--s-3) var(--s-3);
  border-radius: var(--radius-card);
  border: 1px solid var(--lp-border);
  background: rgba(10, 14, 22, 0.6);
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

a.content-card {
  cursor: pointer;
}

.content-card::before {
  content: counter(card, decimal-leading-zero);
  position: absolute;
  top: 14px;
  right: 16px;
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--lp-text-dim);
  opacity: 0.5;
}

a.content-card::after {
  content: '→';
  position: absolute;
  bottom: 16px;
  right: 18px;
  color: var(--lp-accent);
  font-size: var(--text-md);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.22s ease;
}

a.content-card:hover {
  transform: translateY(-3px);
  border-color: var(--lp-accent);
  background: rgba(13, 18, 28, 0.9);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 229, 200, 0.2);
}

a.content-card:hover .content-card-title {
  color: var(--lp-accent-vivid);
}

a.content-card:hover::after {
  opacity: 1;
  transform: translateX(0);
}

.content-card-title {
  margin: 0 0 8px;
  padding-right: var(--s-4);
  color: var(--lp-text-bright);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: var(--text-md);
  line-height: 1.45;
  letter-spacing: 0.012em;
  transition: color 0.2s ease;
}

.content-card-desc {
  margin: 0;
  padding-right: var(--s-3);
  color: var(--lp-text-dim);
  font-family: var(--font-jp-body);
  font-weight: 300;
  font-size: var(--text-sm);
  line-height: 1.8;
  letter-spacing: 0.04em;
}

/* ============================================================
   FAQ — clean accordion, typography-led
   ============================================================ */

.faq-stack {
  max-width: var(--measure-text);
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-bottom: 1px solid var(--lp-border);
  transition: border-color 0.2s ease;
}

.faq-item[open] {
  border-color: var(--lp-line);
}

.faq-item summary {
  position: relative;
  cursor: pointer;
  padding: var(--s-3) 44px var(--s-3) 0;
  color: var(--lp-text-bright);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: var(--text-base);
  line-height: 1.6;
  letter-spacing: 0.015em;
  list-style: none;
  transition: color 0.2s ease;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--lp-accent);
  border-bottom: 1.5px solid var(--lp-accent);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.25s ease;
}

.faq-item[open] summary::after {
  transform: translateY(-30%) rotate(-135deg);
}

.faq-item summary:hover {
  color: var(--lp-accent);
}

.faq-item p {
  max-width: none;
  margin: 0;
  padding: 0 0 var(--s-3);
  color: var(--lp-text);
  font-family: var(--font-jp-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.9;
  letter-spacing: 0.04em;
  text-wrap: pretty;
}

/* ============================================================
   Related section — clear demarcation
   ============================================================ */

.related-section {
  counter-increment: none !important;
  margin-top: var(--s-7);
  padding: var(--s-5) 0 0;
  border-top: 1px solid var(--lp-border);
  position: relative;
}

.related-section::before {
  content: 'See also';
  position: absolute;
  top: -9px;
  left: 0;
  padding: 2px 10px;
  background: var(--lp-void);
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lp-text-dim);
}

.related-section h2 {
  max-width: none;
  margin: 0 0 var(--s-3);
  padding: 0;
  border: none;
  color: var(--lp-text-bright);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: 0.02em;
}

.related-section h2::before {
  display: none;
}

.related-section .card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.related-section .content-card {
  padding: var(--s-2) var(--s-2) var(--s-2);
  border-radius: 12px;
  background: rgba(12, 16, 24, 0.55);
}

.related-section .content-card::before {
  display: none;
}

.related-section .content-card-title {
  padding-right: var(--s-3);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.related-section .content-card-desc {
  padding-right: 12px;
  font-size: var(--text-xs);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related-section .content-card {
  padding: var(--s-3) var(--s-3);
  min-height: 140px;
}

a.related-section .content-card::after,
.related-section a.content-card::after {
  font-size: var(--text-sm);
  bottom: 14px;
  right: 14px;
}

/* ============================================================
   Editorial polish — anchor target, hr ornament, page lead
   ============================================================ */

/* :target highlight — when navigating from the TOC, gently mark the section */
.content-section:target {
  scroll-margin-top: 96px;
}

.content-section:target h2 {
  position: relative;
}

.content-section:target h2::after {
  content: '';
  position: absolute;
  left: -14px;
  top: -2px;
  bottom: -2px;
  width: 3px;
  border-radius: 2px;
  background: var(--lp-accent);
  box-shadow: 0 0 14px rgba(0, 229, 200, 0.45);
  animation: target-flash 2.4s ease forwards;
}

@keyframes target-flash {
  0%   { opacity: 0; transform: scaleY(0.4); }
  18%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0.45; transform: scaleY(1); }
}

/* HR — magazine-style centered ornament (used when articles include a divider) */
.content-article hr {
  margin: var(--s-5) auto;
  width: min(60%, 280px);
  height: 0;
  border: 0;
  text-align: center;
  position: relative;
}

.content-article hr::after {
  content: '✦';
  display: block;
  color: var(--lp-text-dim);
  font-family: var(--font-display);
  font-size: var(--text-md);
  letter-spacing: 0.5em;
  opacity: 0.4;
}

/* Hero lead — reads as opening deck (extends, doesn't replace, hero typography) */
.hero-lead {
  text-wrap: pretty;
}

.hero-subtitle {
  text-wrap: balance;
}

/* Eyecatch — softened to keep image as a reference, not the focal point */
.content-eyecatch img {
  opacity: 0.94;
}

/* CTA card — title balance + small visual hook */
.cta-title {
  text-wrap: balance;
}

.cta-card {
  position: relative;
}

.cta-card::before {
  content: '✦';
  position: absolute;
  top: 14px;
  right: 18px;
  color: var(--lp-accent);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  opacity: 0.55;
  pointer-events: none;
}

/* Card titles + content card descriptions — cleaner wrap */
.content-card-title,
.content-card-desc {
  text-wrap: pretty;
}

/* ============================================================
   Footer
   ============================================================ */

.content-footer {
  margin-top: var(--s-7);
  padding: var(--s-4) var(--s-4) var(--s-5);
  border-top: 1px solid var(--lp-border);
  text-align: center;
}

.footer-links {
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.content-footer p {
  margin: var(--s-2) 0 0;
  color: var(--lp-text-dim);
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 960px) {
  .content-layout {
    grid-template-columns: 1fr;
    gap: var(--s-3);
    margin-top: var(--s-4);
  }

  .content-aside {
    order: 0;
    position: sticky;
    top: 64px;
    z-index: 20;
    background: rgba(6, 8, 12, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--lp-border);
    border-radius: var(--radius-card);
    padding: 0;
    max-height: none;
    overflow: hidden;
  }

  .toc-card {
    position: static;
    padding: 0;
    border-top: none;
    max-height: none;
    overflow: hidden;
  }

  .toc-card details {
    padding: 0;
  }

  .toc-card > summary {
    padding: 12px 16px;
    cursor: pointer;
  }

  .card-grid,
  .related-section .card-grid {
    grid-template-columns: 1fr;
  }

  .content-hero {
    padding: var(--s-5) var(--s-3);
  }

  .content-hero h1 {
    max-width: none;
  }

  .content-section {
    padding-top: var(--s-5);
  }

  .step-detail-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .cta-card {
    padding: var(--s-3);
  }

  .article-dates {
    gap: var(--s-2);
    font-size: 10px;
  }

  .page-meta {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .page-meta {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Print — collapse chrome, preserve reading content
   ============================================================ */

@media print {
  html,
  body {
    background: #ffffff;
    color: #000000;
  }

  body::before {
    display: none;
  }

  .content-header,
  .content-footer,
  .content-aside,
  .related-section,
  .cta-card,
  .content-section-cta,
  .breadcrumbs,
  .article-dates,
  .page-meta {
    display: none;
  }

  .content-layout {
    display: block;
  }

  .content-hero {
    padding: 0;
    border: none;
    background: none;
  }

  .content-hero::before {
    display: none;
  }

  .content-hero h1,
  .content-section h2,
  .content-section h3,
  .content-section p,
  .content-list li,
  .note-item dt,
  .note-item dd,
  .step-item h3,
  .step-desc,
  .step-detail-row dt,
  .step-detail-row dd,
  .checklist-text,
  .callout-title,
  .callout-body,
  .hero-lead,
  .hero-subtitle {
    color: #111111;
  }

  .callout,
  .step-detail-row,
  .checklist-box {
    border-color: #999999;
    background: #ffffff;
  }

  .checklist-box {
    border: 1.5px solid #333333;
  }

  a {
    color: #000000;
    text-decoration: underline;
  }

  .content-section {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Strip color decorations not legible in print */
  .content-section p strong,
  .content-section li strong,
  .note-item dd strong,
  .callout-body strong,
  .faq-item p strong {
    background-image: none;
    color: #000000;
    padding: 0;
  }

  .note-item dt::before,
  .content-section + .content-section:not(.related-section)::after,
  .content-section:target h2::after {
    display: none;
  }

  .content-article hr::after {
    color: #555555;
    opacity: 1;
  }
}

.content-layout--single {
  display: block;
}

.manual-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--s-2);
}

.manual-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--lp-border-strong);
  background: var(--lp-panel);
  color: var(--lp-text-bright);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.manual-badge--pro {
  color: var(--lp-warm);
  border-color: rgba(255, 107, 74, 0.35);
  background: rgba(255, 107, 74, 0.12);
}

.manual-badge--inline {
  margin-left: var(--s-2);
  padding: 2px 8px;
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  vertical-align: middle;
}

.note-item dt .manual-badge--inline {
  text-transform: uppercase;
}

.manual-shot {
  margin: 0 0 var(--s-4);
  padding: var(--s-2);
  border: 1px solid var(--lp-border);
  border-radius: var(--radius-card);
  background: var(--lp-panel-strong);
  box-shadow: var(--shadow-soft);
}

.manual-shot img {
  display: block;
  margin: 0 auto;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 520px;
  border-radius: 12px;
  border: 1px solid var(--lp-border);
}

.manual-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--lp-border);
}

.manual-html-section > :first-child {
  margin-top: 0;
}

.manual-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}

.manual-card {
  gap: var(--s-2);
}

.manual-card .manual-badge {
  margin-top: auto;
}

.manual-cta-stack {
  display: grid;
  gap: var(--s-3);
}

.manual-pro-callout {
  border-color: rgba(255, 107, 74, 0.3);
}

@media (max-width: 720px) {
  :root {
    --s-4: 1.75rem; /* 28 */
    --s-5: 2.5rem;  /* 40 */
    --s-6: 3.5rem;  /* 56 */
  }

  .content-header {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--s-2) var(--s-2);
    gap: var(--s-1);
  }

  .content-main {
    padding: var(--s-3) var(--s-2) var(--s-5);
  }

  .content-hero {
    padding: var(--s-4) var(--s-2);
  }

  .content-hero h1 {
    font-size: clamp(2rem, 8vw, 2.5rem);
  }

  .hero-lead {
    font-size: var(--text-base);
    line-height: 1.85;
  }

  .content-section h2 {
    font-size: var(--text-xl);
  }

  .step-item {
    padding-left: 56px;
  }

  .step-item::before {
    font-size: 1.75rem;
  }

  .related-section {
    margin-top: var(--s-5);
  }

  .manual-card-grid {
    grid-template-columns: 1fr;
  }
}