/* ═════
   CLI-izdat · Site Stylesheet
   After Ruth Wolf-Rehfeldt's typewritings: black + red ribbon on paper, 
   systematic patterns, the poetry of typed characters as visual form.
   ═════ */

/* ── Fonts ── */
@font-face {
  font-family: 'Erica Type';
  src: url('../assets/fonts/EricaType.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM_VGA_8x16';
  src: url('../assets/fonts/IBM_VGA_8x16.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cascadia Mono';
  src: url('../assets/fonts/CascadiaMono.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Syne Mono';
  src: url('../assets/fonts/SyneMono.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* ── Reset ── */
h1, h2, h3, h4, h5, h6,
p, pre, ul, ol, figure, blockquote {
  margin: 0;
  padding: 0;
}
ul, ol {
  list-style: none;
}

/* ── Root variables ── */
:root {
  /* Paper — warm off-white, like aged typewriter stock */
  --paper: #f5f0e6;
  --paper-warm: #ede7d9;
  --paper-dark: #e4ddd0;
  
  /* Ink — typewriter ribbon */
  --ink: #1a1a18;
  --ink-light: #4a4a46;
  --ink-faint: #8a8a84;

  /* Red ribbon */
  --red: #cc3333;
  --red-faint: rgba(204, 51, 51, 0.15);

  /* Terminal (for CLI-izdat post pages) */
  --terminal-bg: #0d1117;
  --terminal-text: #8b949e;
  --terminal-bright: #c9d1d9;

  /* Spacing */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 64px;
  --space-xl: 96px;

  /* Measure — max line length for readability */
  --measure: 680px;
}

/* ── Body ── */
body {
  font-family: "Cascadia Mono", monospace;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

.last-login {
  max-width: 960px;
  padding-top: var(--space-sm);
  font-size: 14px;
  color: var(--ink-faint);
}

/* ── Typography ── */

h1 {
  font-family: 'Cascadia Mono', monospace;
  font-size: clamp(12px, 3.5cqw, 30px);
  line-height: 1.1;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--ink-faint);
  margin: 0;
  overflow: hidden;
}

h1 pre {
  font-family: inherit;
  margin: 0;
  white-space: pre;
}

/* Post page: figlet header — wider than n_euromancer logo, needs tighter clamp */
header h1.post-figlet pre {
  font-family: 'Cascadia Mono', monospace;
  font-size: clamp(8px, 2.2cqw, 22px);
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
  white-space: pre;
  overflow: hidden;
}

h2 {
    font-family: 'Syne Mono', monospace;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: 0.05em;
    font-weight: 500;
    color: var(--red);
    margin-bottom: var(--space-sm);
}

h3 {
    font-family: 'IBM_VGA_8x16';
    font-size: 18px;
    font-weight: 500;
    color: var(--ink-light);
    margin-bottom: var(--space-sm);
}

/* cqw chosen over transform:scale(): scale() doesn't affect layout
   flow so the element keeps its original box, requiring awkward height
   hacks. With container-type on <header>, 1cqw = 1% of header's
   rendered width (capped at 960px by max-width), so the ASCII scales
   proportionally at every breakpoint without ever exceeding its
   container — no floor minimum to cause overflow on narrow viewports.
   3.9cqw fills ~95% of the container (empirically calibrated from
   DevTools: ASCII = 543px at 2.4cqw, scale factor = 3.9/2.4 = 1.625,
   rendered width ≈ 882px vs 928px content — all characters visible). */

p {
  margin-bottom: var(--space-xs);
  max-width: var(--measure);
}
a {
  color: var(--red);
  text-decoration: none;
  border-bottom: 0px solid var(--red-faint);
  transition: border-color 0.2s;
}
ac {
  color: var(--ink-light);
  text-decoration: none;
}
a:hover {
  border-bottom-color: var(--red);
}
small {
  font-size: 0.8rem;
  color: var(--ink-faint);
}
/* Red emphasis — typewriter red ribbon shift */
.red, em {
  color: var(--red);
  font-style: normal;
}

header {
  padding-left: var(--space-md);
  padding-bottom: 0;
  max-width: 960px;
  container-type: inline-size;
}

main {
  max-width: 960px;
  padding-left: var(--space-md);
}

footer {
  max-width: 960px;
  padding: var(--space-md);
  padding-top: var(--space-md);
  font-size: 0.8rem;
  color: var(--ink-faint);
}

/* ── Section ── */
section {
  margin-top: var(--space-md);
  margin-bottom: var(--space-lg);
}

/* ── Nav ── */
nav {
  font-size: 14px;
  font-family: "Cascadia Mono", monospace;
  margin-top: var(--space-xs);
  margin-bottom: var(--space-xs);
  
}
.nav-tilde,
.nav-sep {
  color: var(--ink-faint);
}
nav a {
  color: var(--ink-faint);
  border-bottom: none;
  text-decoration: none;
}
nav a:hover {
  color: var(--ink);
}
nav .active {
  color: var(--red);
}


/* ── Section-bound image layout ── */
.row-with-media {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 0;
  align-items: start;
  margin-bottom: var(--space-md);
}

.row-no-media {
  max-width: calc(100% - var(--space-lg) / 2);
  margin-bottom: var(--space-md);
}

.row-media img {
  display: block;
  height: auto;
}

.row-with-media:nth-child(1) .row-media img {
  width: 50%;
  margin-top: 8px;
  margin-left: auto;
}

.row-with-media:nth-child(2) .row-media img {
  width: 55%;
  margin-top: 0px;
  margin-left: 100px;
}

.row-with-media:nth-child(3) .row-media img {
  width: 50%;
  margin-top: 16px;
  margin-left: auto;
}

/* ── Responsive ── */
@media (max-width: 640px) { 
	body { font-size: 13px; } 
	header, 
	main, 
	nav, 
	.last-login, 
	footer { 
		padding-left: var(--space-sm); 
		padding-right: var(--space-sm); 
	} 
	
	section { margin-bottom: var(--space-md); } 
	
	.row-with-media { 
		grid-template-columns: 1fr; 
		gap: var(--space-sm); 
	} 
	.row-no-media { max-width: 100%; } 
	.row-media { order: 1; } 
	.row-text { order: 0; } 
	.row-with-media:nth-child(1) .row-media img, 
	.row-with-media:nth-child(2) .row-media img, 
	.row-with-media:nth-child(3) .row-media img { 
		margin: 0; 
		width: 100%; 
	} 
}
/* ── Cards grid (planned for archive v2 — see CLAUDE.md roadmap) ── */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.card {
  background: var(--paper-warm);
  border: 1px solid var(--paper-dark);
  overflow: hidden;
  transition: border-color 0.2s;
}

.card:hover {
  border-color: var(--red-faint);
}

.card img {
  width: 100%;
  height: auto;
  display: block;
}

.card-body {
  padding: var(--space-sm);
}

.card-body h3 {
  margin-bottom: 4px;
}

.card-body small {
  display: block;
}

/* ── Post page (light mode — article view) ── */
article.post {
  max-width: var(--measure);
}

article.post img {
  width: 100%;
  height: auto;
  display: block;
  margin: var(--space-md) 0;
}

article.post .meta {
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin-bottom: var(--space-md);
}

/* ── Tags ── */
.tag {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--ink-faint);
  border: 1px solid var(--paper-dark);
  padding: 2px 8px;
  margin-right: 4px;
  margin-bottom: 4px;
}

.topics a {
  color: var(--ink-faint);
  border-bottom: none;
  text-decoration: none;
}

.topics a:hover {
  color: var(--ink);
}

/* ── Slides ──────────────────────────────── */

/* Контейнер ленты слайдов внутри post.njk */
.slides {
  max-width: 960px;
  padding-left: 0;
}

.slides section.slide {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 540px;
  /*margin: 0 auto var(--space-md);*/
  padding: 0px;
  box-sizing: border-box;
  border: 0px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.render-mode .slides section.slide {
  padding: var(--space-sm);
}

.slides section.slide > :last-child {
  margin-top: auto;
}

.slide-num,
.slide-prompt {
  display: none;
}

/* ── slide:cover — ASCII-бокс ── */
.slide--cover pre {
  font-family: "Cascadia Mono", monospace;
  font-size: 12px;
  line-height: 1.2;
  white-space: pre;          /* не переносим строки — ASCII сломается */
  overflow-x: auto;          /* на узких экранах — горизонтальная прокрутка */
  color: var(--ink);
}

.slide--cover code {
  display: block;
  font-size: 14px;
  white-space: pre-wrap;     /* переносим длинные строки по словам */
  color: var(--ink);
}

/* ── slide:text — длинный текст ── */
.slide--text pre {
  font-family: "Cascadia Mono", monospace;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;     /* переносим длинные строки по словам */
  max-width: var(--measure);
  color: var(--ink);
}

.slide--text code {
  display: block;
  font-size: 13px;
  color: var(--ink-faint);
}

/* ── slide:image ── */
.slide--image {
  max-width: var(--measure);
}

.slide--image img {
  display: block;
  width: 100%;
  height: auto;
  margin: var(--space-sm) 0;
}

.slide--image code {
  display: block;
  font-size: 13px;
  color: var(--ink-faint);
}

/* ── slide:combo — текст + картинка стеком ── */
.slide--combo {
  max-width: var(--measure);
}

.slide--combo pre {
  font-family: "Cascadia Mono", monospace;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  color: var(--ink);
}

.slide--combo img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--space-md);
}

.slide--combo code {
  display: block;
  font-size: 13px;
  color: var(--ink-faint);
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .slides { padding-left: var(--space-sm); }
  .slides section.slide { padding: var(--space-md) 0; }
  .slide--cover pre { font-size: 10px; }
  .last-login {
    padding-left: 0px;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
  }
}
/* ═════
   Render mode — full-bleed 1080×1350 для Instagram PNG
   Активируется body.render-mode (set by render.js or ?render=1)
   ═════ */

body.render-mode {
  background: var(--paper);
  margin: 0;
  padding: 0;
}

body.render-mode footer,
body.render-mode header nav {
  display: none;
}

body.render-mode header {
  max-width: none;
  padding: 80px 80px 0 80px;
  margin: 0;
  container-type: normal;
}

body.render-mode header .last-login {
  max-width: none;
  padding-top: 0;
  font-size: 20px;
  color: var(--ink-faint);
}

body.render-mode header h1 {
  font-size: unset;
}

body.render-mode header h1 pre {
  font-family: 'Cascadia Mono', monospace;
  font-size: 22px;
  line-height: 1.1;
  color: var(--ink);
  margin: var(--space-sm) 0 0 0;
  white-space: pre;
}

body.render-mode header h1.post-figlet pre {
  font-size: 22px;
  line-height: 1.1;
}

body.render-mode main,
body.render-mode .slides {
  max-width: none;
  padding: 0;
  margin: 0;
}

/* Каждый слайд — точный Instagram-формат */
body.render-mode .slides section.slide {
  width: 1080px;
  height: 1350px;
  max-width: none;
  aspect-ratio: auto;
  padding: 80px;
  margin: 0;
  box-sizing: border-box;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* Cover slide collapses to content height — Playwright clips header+cover together */
body.render-mode .slides section.slide--cover {
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  padding-top: var(--space-md);
  justify-content: flex-start;
}

/* Отменяем "последний ребёнок прижимается вниз" из обычного режима */
body.render-mode .slides section.slide > :last-child {
  margin-top: 0;
}

/* ── Шрифты по типам слайдов ── */

body.render-mode .slide--cover pre {
  font-size: 18px;
  line-height: 1.2;
}

body.render-mode .slide--cover code {
  font-size: 22px;
}

/* slide:speech — короткий диалог */
body.render-mode .slide--speech p {
  font-family: "Cascadia Mono", monospace;
  font-size: 36px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 var(--space-md) 0;
  max-width: none;
}

/* slide:quote — тезис с акцентом */
body.render-mode .slide--quote p {
  font-family: "Cascadia Mono", monospace;
  font-size: 26px;
  line-height: 1.5;
  color: var(--ink-faint);
  margin: 0 0 var(--space-md) 0;
}
body.render-mode .slide--quote h3 {
  font-family: "Cascadia Mono", monospace;
  font-size: 44px;
  line-height: 1.35;
  color: var(--ink);
  font-weight: 400;
  margin: 0;
  max-width: none;
}

/* slide:text — абзацный блок */
body.render-mode .slide--text p {
  font-family: "Cascadia Mono", monospace;
  font-size: 32px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 var(--space-md) 0;
  max-width: none;
}
body.render-mode .slide--text strong {
  font-weight: 400;
  color: var(--red);
}

/* slide:combo — текст + картинка */
body.render-mode .slide--combo p {
  font-family: "Cascadia Mono", monospace;
  font-size: 28px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 var(--space-md) 0;
  max-width: none;
}

/* slide:image и slide:combo — картинки */
body.render-mode .slide--image img,
body.render-mode .slide--combo img {
  max-width: 100%;
  max-height: 65%;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: var(--space-md) 0;
}

body.render-mode .slide--image code,
body.render-mode .slide--combo code {
  font-family: "Cascadia Mono", monospace;
  font-size: 22px;
  color: var(--ink-faint);
  display: block;
}

body.render-mode .slide-prompt {
  display: block;
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  font-family: "Cascadia Mono", monospace;
  font-size: 18px;
  color: var(--ink-faint);
  user-select: none;
}
body.render-mode .slide-prompt .prompt-host { color: var(--ink-light); }
body.render-mode .slide-prompt .prompt-sign { color: var(--red); }

body.render-mode .slide-num {
  display: block;
  position: absolute;
  bottom: var(--space-md);
  right: var(--space-md);
  font-family: "Cascadia Mono", monospace;
  font-size: 18px;
  color: var(--ink-faint);
  user-select: none;
}

body.render-mode .slide--cover .subtitle {
  font-family: "Cascadia Mono", monospace;
  font-size: 32px;
  margin-top: var(--space-md);
  color: var(--ink);
}

body.render-mode .slide--cover .topics {
  font-family: "Cascadia Mono", monospace;
  font-size: 24px;
  margin-top: var(--space-xs);
  color: var(--ink-faint);
}