/* ============================================================================
   aleksei — content platform design system
   Visual target: Dashi / blog.edgelab.space — near-white canvas, near-black
   cinematic panels, ONE warm terracotta accent, bold grotesk headings for UI,
   editorial serif (Lora) for the article prose.
   Graph-paper grid used as premium decor (hero, page canvas, footer).
   ----------------------------------------------------------------------------
   ACCENT SWAP: change --accent below (single line) to retint the whole site.
   ========================================================================== */

:root {
  /* --- the one knob the operator wants to A/B: the accent color --- */
  --accent: #D2662F;            /* warm terracotta-coral — brighter glow on dark (no blue/violet/pink) */
  --accent-ink: #FFFFFF;        /* text on the accent — white reads on terracotta (contrast ≈ 4.8:1) */

  /* neutrals — warm cozy near-black (dark theme) */
  --bg: #171310;                /* warm near-black canvas */
  --panel: #0C0A08;             /* deepest cinematic panel */
  --panel-2: #141210;           /* slightly lifted dark */
  --card: #201A14;              /* raised warm panel (was white) */
  --card-2: #271F17;            /* raised warm panel, top of gradient */
  --ink: #F3EEE7;               /* primary light text */
  --ink-2: #BAB3A8;             /* secondary light text */
  --ink-3: #8B857A;             /* tertiary / labels */
  --line: rgba(255,255,255,.10);/* hairline dividers on dark */
  --on-dark: #FFFFFF;           /* text on dark panels */
  --on-dark-2: #C0BAB0;         /* secondary text on dark panels */

  --radius: 18px;
  --radius-lg: 26px;
  --maxw: 1200px;

  /* decorative dot-grid — premium background texture (Dashi-style) */
  --dot-step: 24px;                         /* dot spacing */
  --dot-size: 1.2px;                        /* dot radius */
  --dot-light: rgba(255,255,255,.05);       /* light dots on the dark canvas */
  --dot-dark: rgba(255,255,255,.07);        /* light dots on dark panels */
  /* optional hairline grid, layered under dots on the hero for depth */
  --grid-step: 96px;
  --grid-dark: rgba(255,255,255,.035);

  /* Type system — premium, Cyrillic-complete, with variety.
     --ff-display : characterful geometric family for hero + big display moments
     --ff-head    : crisp neutral grotesque for all UI headings/labels
     --ff-body    : one high-legibility body font, site-wide
     Per-guide cover/H1 faces live in the .gf-N rules near the end of this file. */
  --ff-display: "Unbounded", "Onest", system-ui, sans-serif;
  --ff-head: "Onest", "Manrope", system-ui, sans-serif;
  --ff-body: "Inter", system-ui, -apple-system, sans-serif;
  --ff-serif: "Lora", Georgia, "Times New Roman", serif;   /* editorial article prose (full Cyrillic) */
  --ff-mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0;
  background-color: var(--bg);
  /* faint dot-grid across the whole canvas (incl. side gutters) */
  background-image: radial-gradient(var(--dot-light) var(--dot-size), transparent var(--dot-size));
  background-size: var(--dot-step) var(--dot-step);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* headings: bold modern grotesk everywhere */
h1, h2, h3, h4 {
  font-family: var(--ff-head);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0;
}
.k { color: var(--accent); }          /* one accent word inside a headline */

/* uppercase micro-label with an accent square bullet: ■ LABEL */
.eyebrow, .card__cat, .flag, .sec-head .lbl, .side__label, .cat, .about .lbl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-head);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.eyebrow .dot, .card__cat .d, .flag .d, .cat .d, .about .lbl .d,
.sq { width: 9px; height: 9px; background: var(--accent); border-radius: 2.5px; flex: none;
  box-shadow: 0 0 10px -1px color-mix(in srgb, var(--accent) 75%, transparent),
              inset 0 0 0 1px color-mix(in srgb, #fff 22%, transparent); }

/* ------------------------------------------------------------------ layout */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ------------------------------------------------------------------- nav */
.nav { position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line); }
.nav__in { max-width: var(--maxw); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--ff-head); font-weight: 700; font-size: 20px;
  letter-spacing: -0.02em; }
.brand__mark { width: 16px; height: 16px; border-radius: 4px;
  background: var(--accent); flex: none; }
.brand__word { color: var(--ink); }
.nav__links { display: flex; gap: 26px; margin-left: 8px; }
.nav__links a { font-family: var(--ff-head); font-weight: 500; font-size: 15px;
  color: var(--ink-2); transition: color .15s; }
.nav__links a:hover { color: var(--ink); }
.nav__spacer { flex: 1; }
.nav__pill { display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-head); font-weight: 600; font-size: 14px;
  padding: 11px 19px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent) 55%, transparent),
              inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .15s, filter .15s, box-shadow .15s; }
.nav__pill:hover { transform: translateY(-1px); filter: brightness(1.04);
  box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--accent) 70%, transparent),
              inset 0 1px 0 rgba(255,255,255,.32); }

/* ------------------------------------------------------------------- hero */
.hero { padding: 26px 0 12px; }
/* the scene IS the panel background — image woven in, text layered on top */
.hero__panel { position: relative; overflow: hidden;
  background-color: var(--panel); color: var(--on-dark);
  border-radius: var(--radius-lg);
  padding: clamp(40px, 5vw, 72px) clamp(30px, 5vw, 76px);
  min-height: clamp(440px, 46vw, 560px);
  display: flex; flex-direction: column; justify-content: center;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.7),
              inset 0 0 0 1px rgba(255,255,255,.06); }
/* the generated cinematic scene, covering the whole panel */
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: right center; z-index: 0; }
/* portal hero: keep the glowing vortex core framed (its own scene, core mid-right) */
.hero__panel--portal .hero__bg { object-position: 78% 50%; }
/* horizontal legibility overlay: solid dark left, brain glows through on the right */
.hero__panel::before { content: ""; position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    #0e0e0d 0%, rgba(14,14,13,.92) 38%,
    rgba(14,14,13,.45) 66%, rgba(14,14,13,.15) 100%); }
/* the text layer — sits above the scene, left-anchored */
.hero__l { position: relative; z-index: 2; max-width: 58%; }
.hero .eyebrow { color: var(--on-dark); margin-bottom: 26px;
  padding: 7px 14px 7px 12px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px); }
.hero .eyebrow .dot { box-shadow: 0 0 12px 1px var(--accent),
  inset 0 0 0 1px rgba(255,255,255,.3); }
.hero h1 { font-family: var(--ff-display); font-size: clamp(34px, 5.4vw, 64px);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.02;
  text-shadow: 0 2px 30px rgba(0,0,0,.5); }
.hero h1 .k { white-space: nowrap; }   /* keep "Claude Code" on one line */
.hero .sub { color: var(--on-dark-2); font-size: clamp(16px, 1.5vw, 19px);
  max-width: 30em; margin: 24px 0 32px;
  text-shadow: 0 1px 16px rgba(0,0,0,.5); }
.hero__cta { display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--ff-head); font-weight: 600; font-size: 15px;
  color: var(--accent-ink); }
.hero__cta .btn { width: 48px; height: 48px; border-radius: 999px;
  background: var(--accent); display: grid; place-items: center;
  box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--accent) 70%, transparent);
  transition: transform .15s; }
.hero__cta:hover .btn { transform: translateX(3px); }
.hero__cta .btn svg { width: 20px; height: 20px; }
.hero__cta .lbl { color: var(--on-dark); letter-spacing: .08em;
  text-transform: uppercase; font-size: 12px; }
/* glassy metric pills, bottom of the content column */
.hero__badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.hb { display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--ff-head); font-weight: 500; font-size: 12.5px; color: #fff;
  padding: 8px 14px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 8px 22px -12px rgba(0,0,0,.7);
  backdrop-filter: blur(10px) saturate(1.3); }
.hb b { font-weight: 700; }
/* --------------------------------------------------------------- sections */
.section { padding: clamp(34px, 5vw, 60px) 0 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; padding-bottom: 22px; }
.sec-head h2 { font-size: clamp(24px, 3vw, 34px); }
.sec-head .lbl { color: var(--ink-3); margin-bottom: 12px; }
.sec-head .lead { color: var(--ink-2); font-size: 15px; margin: 8px 0 0;
  max-width: 42em; }
.see-all { font-family: var(--ff-head); font-weight: 600; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  border-bottom: 2px solid transparent; padding-bottom: 3px; transition: .15s; }
.see-all:hover { border-color: var(--accent); }

/* ----------------------------------------------------------------- cards */
.grid { display: grid; gap: clamp(20px, 2.4vw, 30px); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }

.card { display: block; transition: transform .18s; }
.card:hover { transform: translateY(-4px); }
/* dark cinematic cover with overlaid title */
.card__cover { position: relative; aspect-ratio: 3 / 2; overflow: hidden;
  border-radius: var(--radius); background: var(--panel);
  box-shadow: 0 1px 0 var(--line); }
.card__cover img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; }
.card__cover::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.05) 42%,
              rgba(0,0,0,.55) 78%, rgba(0,0,0,.82) 100%); }
/* tag chip, top-left on the cover */
.card__chip { position: absolute; top: 15px; left: 15px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-head); font-weight: 600; font-size: 10.5px;
  letter-spacing: .13em; text-transform: uppercase; color: #fff;
  padding: 7px 13px 7px 11px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(16,16,14,.66), rgba(8,8,7,.58));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 8px 22px -10px rgba(0,0,0,.7);
  backdrop-filter: blur(12px) saturate(1.4); }
.card__chip .d { width: 8px; height: 8px; box-shadow: 0 0 10px 0 var(--accent),
  inset 0 0 0 1px rgba(255,255,255,.3); }
/* overlaid title, bottom-left on the cover */
.card__title { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 3;
  font-family: var(--ff-head); font-weight: 700; color: #fff;
  font-size: clamp(20px, 2vw, 25px); letter-spacing: -0.02em; line-height: 1.1;
  text-shadow: 0 2px 24px rgba(0,0,0,.5); }
.card__title .k { color: var(--accent); }
/* meta below the cover */
.card__body { padding: 16px 2px 0; }
.card__cat { color: var(--ink-3); }
.card__body h3 { font-size: 19px; margin: 12px 0 8px; }
.card__body p { color: var(--ink-2); font-size: 15px; margin: 0 0 14px; }
.card__meta { display: flex; align-items: center; gap: 12px;
  font-family: var(--ff-head); font-weight: 500; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.card__meta .go { margin-left: auto; color: var(--ink);
  transition: transform .15s; }
.card:hover .card__meta .go { transform: translateX(3px); }

/* --------------------------------------------------------------- feature (big card, row) */
.feature { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(22px,3vw,40px);
  align-items: center; padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--card-2), var(--card));
  transition: transform .18s, box-shadow .18s; }
.feature:hover { transform: translateY(-3px); box-shadow: 0 18px 50px -30px rgba(0,0,0,.35); }
.feature__cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: var(--radius); background: var(--panel); }
.feature__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature__cover::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.55) 80%, rgba(0,0,0,.8)); }
.feature .card__chip { top: 14px; left: 14px; }
.feature .card__title { font-size: clamp(21px, 2.2vw, 27px); }
.feature__body .flag { color: var(--accent); margin-bottom: 14px; }
.feature__body h3 { font-size: clamp(24px, 2.8vw, 32px); margin-bottom: 12px; }
.feature__body p { color: var(--ink-2); font-size: 16px; margin: 0 0 20px; }
.feature__meta { display: flex; align-items: center; gap: 18px;
  font-family: var(--ff-head); font-weight: 600; font-size: 13px; }
.feature__meta .min { color: var(--ink-3); letter-spacing: .06em;
  text-transform: uppercase; font-size: 12px; }
.feature__meta .arrow { color: var(--ink); display: inline-flex; gap: 8px; }
.feature:hover .feature__meta .arrow { color: var(--accent); }

/* helper strip (copy-page pitch) */
.helper { position: relative; display: flex; align-items: center; gap: 16px; margin-top: 26px;
  padding: 18px 22px; border-radius: var(--radius); overflow: hidden;
  background:
    radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%),
    linear-gradient(180deg, #16160F, var(--panel));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06); color: var(--on-dark); }
.helper .ic { width: 42px; height: 42px; border-radius: 12px; flex: none;
  display: grid; place-items: center; background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--accent) 60%, transparent),
              inset 0 1px 0 rgba(255,255,255,.35); }
.helper p { margin: 0; font-size: 15px; color: var(--on-dark-2); }
.helper b { color: var(--on-dark); }

/* ---------------------------------------------------------------- about */
.about { padding: clamp(40px, 6vw, 80px) 0; }
.about__panel { border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--card-2), var(--card));
  padding: clamp(28px, 4vw, 52px); max-width: 760px; }
.about .lbl { color: var(--ink-3); }
.about h2 { font-size: clamp(26px, 3.4vw, 38px); margin: 16px 0 18px; }
.about p { color: var(--ink-2); font-size: 17px; margin: 0 0 22px; }
.about__tags { display: flex; flex-wrap: wrap; gap: 10px; }
.about__tags span { font-family: var(--ff-head); font-weight: 500; font-size: 13px;
  padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line);
  background: linear-gradient(180deg, #241E17, #1C1712);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.3); color: var(--ink-2); }
.about__tags span:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.about__tg { display: inline-flex; align-items: center; gap: 9px; margin-top: 22px;
  font-family: var(--ff-head); font-weight: 600; font-size: 14px;
  padding: 10px 17px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  transition: border-color .15s, background .15s, transform .15s; }
.about__tg .d { width: 9px; height: 9px; background: var(--accent); border-radius: 2.5px;
  flex: none; box-shadow: 0 0 10px -1px color-mix(in srgb, var(--accent) 75%, transparent); }
.about__tg:hover { border-color: var(--accent); transform: translateY(-1px);
  background: color-mix(in srgb, var(--accent) 20%, var(--card)); }

/* --------------------------------------------------------------- track strip */
.track-strip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 0 4px; margin-bottom: clamp(6px, 1.4vw, 14px); }
.track-strip__tag { display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--ff-head); font-weight: 600; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  background: color-mix(in srgb, var(--accent) 14%, var(--card)); }
.track-strip__tag .d { width: 9px; height: 9px; background: var(--accent); border-radius: 2.5px;
  flex: none; box-shadow: 0 0 10px -1px color-mix(in srgb, var(--accent) 75%, transparent),
              inset 0 0 0 1px color-mix(in srgb, #fff 22%, transparent); }
.track-strip__note { color: var(--ink-3); font-size: 14px; }

/* --------------------------------------------------------------- footer */
.foot { border-top: 1px solid var(--line); margin-top: 40px;
  background-color: #120F0C;
  /* slightly more present dot-grid band in the footer zone */
  background-image: radial-gradient(rgba(255,255,255,.05) var(--dot-size), transparent var(--dot-size));
  background-size: var(--dot-step) var(--dot-step); }
.foot__in { max-width: var(--maxw); margin: 0 auto; padding: 30px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; }
.foot__tag { color: var(--ink-3); font-size: 14px; }
.foot__tg { font-family: var(--ff-head); font-weight: 600; font-size: 14px;
  color: var(--accent); transition: opacity .15s; }
.foot__tg:hover { opacity: .75; }

/* ============================================================================
   GUIDE READING PAGE  — left guide-list · center article · right TOC
   ========================================================================== */
.reading { max-width: 1440px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 250px minmax(0, 1fr) 230px;
  gap: clamp(28px, 3.4vw, 56px); align-items: start; }

/* left sidebar — full guide list */
.side { position: sticky; top: 78px; padding-top: 34px; }
.side__label { color: var(--ink-3); margin-bottom: 16px; }
.side__list { display: flex; flex-direction: column; }
.side__list a { font-size: 14px; line-height: 1.35; color: var(--ink-2);
  padding: 9px 0 9px 16px; border-left: 2px solid var(--line);
  transition: color .15s, border-color .15s; }
.side__list a:hover { color: var(--ink); border-color: var(--ink-3); }
.side__list a.is-active { color: var(--ink); font-weight: 600;
  border-left-color: var(--accent); }

/* right sidebar — on-page TOC */
.toc { position: sticky; top: 78px; padding-top: 34px; }
.toc__label { color: var(--ink-3); margin-bottom: 16px; }
.toc__list { display: flex; flex-direction: column; gap: 2px; }
.toc__list a { font-size: 13px; line-height: 1.35; color: var(--ink-3);
  padding: 6px 0; transition: color .15s; }
.toc__list a:hover, .toc__list a.is-active { color: var(--ink); }

/* center article column */
.art { padding: 24px 0 40px; min-width: 0; }
.art-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--panel); margin-bottom: 24px; }
.art-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art-cover::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.15) 45%,
              rgba(0,0,0,.6) 82%, rgba(0,0,0,.85)); }
.art-cover .card__chip { top: 18px; left: 18px; }
.art-cover .art-cover__title { position: absolute; left: 28px; right: 28px; bottom: 26px;
  z-index: 3; font-family: var(--ff-head); font-weight: 700; color: #fff;
  font-size: clamp(28px, 3.6vw, 46px); letter-spacing: -0.03em; line-height: 1.06;
  text-shadow: 0 2px 30px rgba(0,0,0,.5); }
.art-cover .art-cover__title .k { color: var(--accent); }

.crumbs { display: flex; align-items: center; gap: 10px; font-size: 13px;
  color: var(--ink-3); margin-bottom: 14px; }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { color: var(--line); }
.art h1 { font-size: clamp(28px, 3.6vw, 44px); margin: 4px 0 18px; }
.byline { display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; padding-bottom: 26px; border-bottom: 1px solid var(--line);
  margin-bottom: 30px; }
.byline__who { display: flex; align-items: center; gap: 12px; }
.byline__mark { width: 36px; height: 36px; border-radius: 9px; flex: none;
  background: var(--panel); display: grid; place-items: center; }
.byline__mark span { width: 13px; height: 13px; border-radius: 3px; background: var(--accent); }
.byline__name { font-family: var(--ff-head); font-weight: 600; font-size: 15px; }
.byline__meta { font-size: 13px; color: var(--ink-3); }
.copy { display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-family: var(--ff-head); font-weight: 600; font-size: 13px;
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); transition: .15s; }
.copy:hover { border-color: var(--ink); }
.copy.is-done { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.copy svg { width: 16px; height: 16px; }
.copy-hint { font-size: 13px; color: var(--ink-3); margin: -18px 0 30px; }

/* article body typography — editorial SERIF prose (Lora), sans headings.
   Body text is capped to a comfortable measure (~68 chars) for readability. */
.body { font-family: var(--ff-serif); font-size: 19px; line-height: 1.75;
  color: #E8E3DA; max-width: 700px; }
.body > *:first-child { margin-top: 0; }
.body p { margin: 0 0 22px; }
/* headings stay bold grotesk (sans) — deliberate contrast against serif body */
.body h2 { font-family: var(--ff-head); font-size: clamp(23px, 2.6vw, 30px);
  margin: 48px 0 16px; scroll-margin-top: 90px; }
.body h3 { font-family: var(--ff-head); font-size: 21px; margin: 32px 0 12px; }
.body strong { font-weight: 600; color: var(--ink); }
.body a { color: var(--ink); border-bottom: 2px solid var(--accent); }
.body ul, .body ol { margin: 0 0 22px; padding-left: 24px; }
.body li { margin: 0 0 10px; }
.body li::marker { color: var(--accent); }
/* pull-quote / callout — accent left border, serif italic voice */
.body blockquote, .body .callout { margin: 30px 0; padding: 18px 26px;
  border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, var(--card)), var(--card));
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--ff-serif); font-style: italic; font-weight: 500;
  font-size: 19px; line-height: 1.6; color: var(--ink); }
/* lead-in — the intro paragraph of every guide, set as a bordered врезка:
   larger serif, accent left-rule, faint tinted panel (Dashi intro-quote look) */
.body .lead { font-size: 21px; line-height: 1.62; color: var(--ink);
  margin: 0 0 30px; padding: 20px 26px;
  border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, var(--card)), var(--card));
  border-radius: 0 var(--radius) var(--radius) 0; }
/* code */
.body code { font-family: var(--ff-mono); font-size: .88em;
  background: #262019; padding: 2px 6px; border-radius: 6px; color: #E8E3DA; }
.body pre { background: var(--panel); color: #e8e8e2; padding: 20px 22px;
  border-radius: var(--radius); overflow-x: auto; margin: 26px 0;
  font-family: var(--ff-mono); font-size: 14px; line-height: 1.6; }
.body pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
/* dark media block */
.body figure { margin: 30px 0; }
.body figure img { border-radius: var(--radius); }
.body .media, .body figure.media { background: var(--panel); border-radius: var(--radius-lg);
  aspect-ratio: 16 / 9; }
.body figcaption { font-size: 13px; color: var(--ink-3); margin-top: 10px; text-align: center; }

/* article footer nav */
.art-nav { max-width: 1440px; margin: 0 auto; padding: 10px 24px 50px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; }
.backlink { font-family: var(--ff-head); font-weight: 600; font-size: 14px; color: var(--ink-2); }
.backlink:hover { color: var(--ink); }
.nextlink { display: inline-flex; align-items: center; gap: 18px;
  padding: 16px 22px; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--card-2), var(--card)); transition: .15s; }
.nextlink:hover { border-color: var(--ink); transform: translateY(-2px); }
.nextlink .l { display: block; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); font-family: var(--ff-head); font-weight: 600; }
.nextlink .t { display: block; font-family: var(--ff-head); font-weight: 600; font-size: 15px; }
.nextlink .a { color: var(--accent-ink); background: var(--accent);
  width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; flex: none; }

/* ============================================================================
   PER-GUIDE DISPLAY FACES
   Each guide's cover title + article H1 gets its own curated display font, so
   every guide reads with its own character (like Dashi's varied covers) while
   the body font stays consistent site-wide. All faces are Cyrillic-complete.
   Selectors are specificity-matched to win over the component base rules.
   ---------------------------------------------------------------------------
   g1 Что такое Claude Code   → Unbounded   (flagship geometric)
   g2 Установка и запуск      → Tektur      (wide techy)
   g3 Как ставить задачу      → Oswald      (tall, directional)
   g4 CLAUDE.md               → Prata       (elegant serif — rules artifact)
   g5 Контекст и деньги       → Russo One   (blocky techy)
   g6 MCP-серверы             → Onest       (clean heavy grotesque)
   g7 Частые ошибки           → Oswald      (condensed caution)
   g8 Скиллы                  → Tektur      (modular techy)
   ========================================================================== */
.card__title.gf-1, .art-cover .art-cover__title.gf-1, .art h1.gf-1 {
  font-family: "Unbounded", var(--ff-head); font-weight: 700; letter-spacing: -0.02em; }
.card__title.gf-2, .art-cover .art-cover__title.gf-2, .art h1.gf-2 {
  font-family: "Tektur", var(--ff-head); font-weight: 700; letter-spacing: -0.01em; }
.card__title.gf-3, .art-cover .art-cover__title.gf-3, .art h1.gf-3 {
  font-family: "Oswald", var(--ff-head); font-weight: 600; letter-spacing: 0.005em; }
.card__title.gf-4, .art-cover .art-cover__title.gf-4, .art h1.gf-4 {
  font-family: "Prata", Georgia, serif; font-weight: 400; letter-spacing: -0.005em; }
.card__title.gf-5, .art-cover .art-cover__title.gf-5, .art h1.gf-5 {
  font-family: "Russo One", var(--ff-head); font-weight: 400; letter-spacing: -0.005em; }
.card__title.gf-6, .art-cover .art-cover__title.gf-6, .art h1.gf-6 {
  font-family: "Onest", var(--ff-head); font-weight: 800; letter-spacing: -0.03em; }
.card__title.gf-7, .art-cover .art-cover__title.gf-7, .art h1.gf-7 {
  font-family: "Oswald", var(--ff-head); font-weight: 600; letter-spacing: 0.005em; }
.card__title.gf-8, .art-cover .art-cover__title.gf-8, .art h1.gf-8 {
  font-family: "Tektur", var(--ff-head); font-weight: 700; letter-spacing: -0.01em; }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .reading { grid-template-columns: minmax(0,1fr) 220px; }
  .side { display: none; }             /* hide guide-list first */
}
@media (max-width: 900px) {
  .cols-3 { grid-template-columns: repeat(2, 1fr); }
  .hero__panel { min-height: clamp(520px, 96vw, 640px);
    padding: clamp(30px,7vw,46px); justify-content: stretch; align-items: stretch; }
  .hero__l { max-width: 100%; width: 100%; min-width: 0; display: flex; flex-direction: column; flex: 1; }
  .hero__bg { object-position: 64% 38%; }
  /* vertical overlay: crisp dark at top behind text, brain glows through below */
  .hero__panel::before { background: linear-gradient(180deg,
    #0e0e0d 0%, rgba(14,14,13,.9) 40%,
    rgba(14,14,13,.32) 66%, rgba(14,14,13,.55) 100%); }
  /* push metric pills to the bottom, over the glow */
  .hero__badges { margin-top: auto; padding-top: clamp(24px,12vw,100px); }
  .feature { grid-template-columns: 1fr; }
  .reading { grid-template-columns: minmax(0,1fr); }
  .toc { display: none; }               /* hide TOC on mobile */
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .cols-3, .cols-2 { grid-template-columns: 1fr; }
  .nav__links { display: none; }
  .sec-head { flex-direction: column; align-items: flex-start; }
  .byline { flex-direction: column; align-items: flex-start; }
  .hero h1 { font-size: 25px; overflow-wrap: break-word; }
  .hero h1 .k { white-space: normal; }   /* let the wide display face wrap on phones */
  .hero .sub { max-width: 100%; overflow-wrap: break-word; }
  .art h1 { font-size: 27px; }
  .card__title { font-size: 20px; }
  .art-cover .art-cover__title { font-size: 25px; left: 20px; right: 20px; bottom: 20px; }
  .body { font-size: 17px; line-height: 1.72; }
  .body .lead { font-size: 18.5px; padding: 16px 18px; }
  .body blockquote, .body .callout { padding: 16px 18px; font-size: 17px; }
  .body pre { padding: 15px 16px; font-size: 13px; }
  .art { padding: 18px 0 34px; }
  .reading { padding: 0 18px; }
}