/* Ivayev — IBM Plex Mono em papel creme, réguas tracejadas, rosa.
   Um arquivo só. Ordem: fonte · cores e medidas · base · menu ao lado ·
   abas · texto · listas · fluxo de reflexões · contos · celular. */

/* ---------- fonte (servida pelo próprio site) ----------
   font-display: optional — se a fonte não chega a tempo, a página fica na fonte reserva
   em vez de trocar no meio da leitura (era isso que piscava). Da segunda página em diante
   a fonte já está guardada no navegador e aparece de primeira. */
@font-face { font-family: "Plex Mono"; src: url("/fontes/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: optional; }
@font-face { font-family: "Plex Mono"; src: url("/fontes/plex-mono-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: optional; }
@font-face { font-family: "Plex Mono"; src: url("/fontes/plex-mono-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: optional; }
@font-face { font-family: "Plex Mono"; src: url("/fontes/plex-mono-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: optional; }

/* ---------- cores e medidas ---------- */
:root {
  --bg: #f7f6f3; --fg: #1d1d1d; --mu: #85817a; --pk: #f59ac4;
  --font: "Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --col: 42rem;        /* largura da coluna de texto (~77 letras por linha) */
  --side: 13rem;       /* largura do menu ao lado */
  --gutter: 16px;      /* margem lateral mínima */
  --hh: 3rem;          /* altura da barra de cima, no celular */
  --rule: 1px dashed;  /* régua tracejada */
  --sbg: color-mix(in srgb, var(--pk) 16%, var(--bg));   /* fundo do menu: rosa clarinho (vinho discreto no escuro) */
}
:root[data-theme="dark"] { --bg: #161513; --fg: #e8e4dc; --mu: #8f8a80; --pk: #ff5fb8; color-scheme: dark; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--bg);
  overflow-y: scroll;                       /* a barra de rolagem sempre existe: nada pula entre páginas curtas e longas */
  scroll-padding-top: 1rem;
  -webkit-text-size-adjust: 100%;
}
@view-transition { navigation: auto; }      /* troca de página sem piscar (Chrome, Edge, Safari) */
body {
  margin: 0; min-height: 100vh;
  background: var(--bg); color: var(--fg);
  font: 14.5px/1.75 var(--font);
  overflow-wrap: break-word;
}
::selection { background: var(--pk); color: #111; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--pk); text-decoration-thickness: 2px; text-underline-offset: .22em; }
main a:hover { background: var(--pk); color: #111; text-decoration: none; }
p { margin: 0 0 1em; }

/* ---------- menu ao lado (no celular, vira a barra de cima) ---------- */
.page { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100vh; }
.side {
  position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh; z-index: 10;
  display: flex; flex-direction: column; gap: 1.8em; padding: 2.2rem 1.4rem 1.2rem;
  background: var(--sbg); font-size: 13px; line-height: 1.3; view-transition-name: side;
}
.side a { text-decoration: none; }
/* coluna no meio do caminho entre colada ao menu e centralizada: anda 1/4 do espaço que sobra */
main { max-width: calc(var(--col) + 2 * 2.6rem); margin-left: max(0px, calc((100% - var(--col) - 2 * 2.6rem) / 4)); padding: 2.6rem 2.6rem 3rem; }

.brand { font-size: 17px; font-weight: 700; letter-spacing: .28em; text-transform: lowercase; white-space: nowrap; }
.brand::before { content: ""; display: inline-block; width: .75em; height: .65em; margin-right: .9em; background: var(--pk); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

.snav { display: flex; flex-direction: column; align-items: flex-start; gap: .35em; font-size: 13.5px; }
.snav a { color: var(--mu); }
.snav a:hover { color: var(--fg); }
.snav a[aria-current] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--pk); }

/* embaixo do menu: os idiomas em linha, e o rodapé */
.foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: .9em; text-align: center; }
.langs { display: flex; justify-content: center; gap: 1.1em; font-size: 13px; }
.langs a { color: var(--mu); padding: .1em 0; }
.langs a:hover { color: var(--fg); }
.langs a[aria-current] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--pk); }
.copy { margin: 0; color: color-mix(in srgb, var(--mu) 55%, var(--sbg)); font-size: 11.5px; white-space: nowrap; }   /* bem apagado: quase some no rosa do menu */
.copy a:hover { color: var(--fg); }

/* no celular o rodapé vai para o fim do texto */
.mfoot { display: none; margin-top: 3em; padding-top: 1em; border-top: var(--rule) var(--fg); color: var(--mu); font-size: 12px; text-align: center; }
.mfoot a { text-decoration: none; }
.mfoot a[aria-current] { color: var(--fg); }

/* modo claro/escuro: balãozinho no canto de cima, à direita; não é fixo, sobe junto com a página */
.page { position: relative; }
.theme {
  position: absolute; top: .9rem; right: .9rem; z-index: 5;
  display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0;
  color: var(--fg); background: var(--sbg); border: 0; border-radius: 50%; cursor: pointer;
}
.theme:hover { color: #111; background: var(--pk); }
.theme svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme .i-moon { fill: currentColor; stroke: none; }
.theme .i-sun, :root[data-theme="dark"] .theme .i-moon { display: none; }
:root[data-theme="dark"] .theme .i-sun { display: block; }

/* ---------- abas das seções ---------- */
.tabs { display: none; gap: .8em; margin: 0 0 2.4em; color: var(--mu); }
.tabs a { color: var(--mu); text-decoration: none; }
.tabs a:hover { color: var(--fg); background: none; }
.tabs a[aria-current] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--pk); }

/* ---------- texto ---------- */
.meta { color: var(--mu); margin: 0 0 .6em; }
.cdata { font-size: 13px; }   /* data no alto do conto: um tico menor que o menu (13.5px) */
.lede { font-style: italic; }

/* título do texto e título de reflexão no fluxo: o mesmo estilo */
h1, .rt { font-size: 1em; font-weight: 600; line-height: 1.5; letter-spacing: .04em; text-transform: uppercase; }
h1 { margin: 0 0 1.2em; }
h1::after { content: "================================================================================================================================================================================================================================================"; display: block; width: 100%; overflow: hidden; white-space: nowrap; font-weight: 400; letter-spacing: 0; color: var(--pk); }

/* subtítulos dentro do texto e título das listas do pé: "## " */
.body h2, .body h3, .more h2 { font-size: 1em; font-weight: 600; margin: 1.8em 0 .4em; }
.body h2::before, .more h2::before { content: "## "; color: var(--pk); }
.body h3::before { content: "### "; color: var(--pk); }

blockquote { margin: 1.4em 0; padding-left: 2ch; }
blockquote p::before { content: "> "; margin-left: -2ch; color: var(--pk); }
.body ul, .body ol { margin: 0 0 1em; padding-left: 3ch; }
.sep { margin: 2em 0; border: 0; text-align: center; }
.sep::before { content: "* * *"; color: var(--mu); }

/* ---------- listas ---------- */
.more ul, .clist { margin: 0; padding: 0; list-style: none; }

/* "outros textos" / "contos" no pé: data + título */
.more { margin-top: 3em; }
.more h2 { margin-top: 0; color: var(--mu); }
.more li { display: flex; gap: 2.5ch; padding: .12em 0; }
.more time { color: var(--mu); white-space: nowrap; }

/* páginas do início: ← mais recentes · 2 / 4 · mais antigas → */
.pager { display: flex; justify-content: space-between; gap: 2ch; margin-top: 3em; padding-top: 1em; border-top: var(--rule) var(--mu); color: var(--mu); }
.pager a { text-decoration: none; }

/* lista de contos */
.clist li { padding: 1em 0; border-top: var(--rule) var(--mu); }
.clist li:first-child { padding-top: 0; border-top: 0; }
.clist .ctit { display: flex; align-items: baseline; gap: 1em; margin: 0; }
.clist .ctit time { margin-left: auto; color: var(--mu); font-size: 13px; white-space: nowrap; }   /* data encostada à direita */
.clist .cmin { margin: .35em 0 0; color: var(--mu); font-size: 11px; }   /* tempo de leitura, bem pequeno */
.clist a { font-weight: 600; }
.clist .resumo { margin: .3em 0 0; color: var(--mu); font-style: italic; }

/* ---------- fluxo de reflexões (início) ---------- */
.r + .r { margin-top: 2.2em; padding-top: 2.2em; border-top: var(--rule) var(--mu); }
.r .meta { margin-bottom: .5em; }
.r .perma { color: var(--mu); text-decoration: none; }
.r .rt { margin: 0 0 .8em; }
.r .rt a { text-decoration: none; }
.r .body > :last-child { margin-bottom: 0; }
/* reflexão longa no início: o fim do trecho vai sumindo, e embaixo o convite */
.r .body.cut { -webkit-mask-image: linear-gradient(to top, transparent 0, #000 5em); mask-image: linear-gradient(to top, transparent 0, #000 5em); }
.r .cont { margin: .8em 0 0; }
.r .cont a { text-decoration: none; color: var(--mu); }
.r .cont a:hover { color: #111; }

/* ---------- compartilhar (no fim de cada texto) ---------- */
.share { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4em 0; margin-top: 2.6em; padding-top: 1em; border-top: var(--rule) var(--mu); color: var(--mu); font-size: 13px; }
.share a, .share button { color: var(--mu); text-decoration: none; }
.share .dot { margin: 0 1.4ch; }
.share > span:first-child { margin-right: 1.4ch; }
.share button { padding: 0; font: inherit; background: none; border: 0; cursor: pointer; }
.share a:hover, .share button:hover { color: #111; background: var(--pk); }
.phead { display: none; }

/* ---------- conto ---------- */
.epi { margin: 0 0 2.2em; color: var(--mu); font-style: italic; }
.epi p::before { content: none; }
.epi cite { display: block; font-size: .9em; font-style: normal; }
.fim { margin: 2.6em 0 0; color: var(--mu); text-align: center; }
.fim::before { content: "— "; }
.fim::after { content: " —"; }

/* ---------- celular: o menu vira a barra de cima ---------- */
@media (max-width: 639.98px) {
  html { scroll-padding-top: calc(var(--hh) + 1rem); }
  .page { display: block; }
  .side { height: var(--hh); flex-direction: row; align-items: center; gap: .7em; padding: 0 var(--gutter); font-size: 12px; border-bottom: var(--rule) var(--fg); }
  .brand { font-size: 16px; letter-spacing: .2em; }
  .snav, .copy { display: none; }
  .foot { margin: 0 0 0 auto; }
  .langs { gap: .8em; font-size: 12px; }
  .theme { top: calc(var(--hh) + .9rem); right: var(--gutter); }
  main { max-width: calc(var(--col) + 2 * var(--gutter)); margin: 0 auto; padding: 2.2rem var(--gutter) 2rem; }
  .tabs { display: flex; }
  .mfoot { display: block; }
  .more li { flex-direction: column; gap: 0; padding: .4em 0; }
}
/* ---------- impressão: só o texto, preto no branco ---------- */
@media print {
  :root, :root[data-theme="dark"] { --bg: #fff; --fg: #000; --mu: #666; --pk: #bbb; color-scheme: light; }
  @page { margin: 2.2cm 2cm; }
  body { font-size: 10.5pt; line-height: 1.6; }
  .side, .theme, .tabs, .mfoot, .more, .share, .pager { display: none !important; }
  .page { display: block; }
  main { max-width: none; margin: 0; padding: 0; }
  a { text-decoration: none; }
  h1, h2, h3 { break-after: avoid; }
  blockquote, .epi { break-inside: avoid; }
  p { orphans: 3; widows: 3; }
  .phead { display: flex; justify-content: space-between; align-items: baseline; gap: 2ch; margin: 0 0 2.4em; padding-bottom: .8em; border-bottom: var(--rule) var(--mu); }
  .phead .brand { font-size: 12pt; }
  .phead .brand::before { background: #f59ac4; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .purl { color: var(--mu); font-size: 8.5pt; }
}
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }