/* As cartinhas de 06/03 a 12/06/2026 foram escritas e publicadas no Notion
   (api4com.notion.site). Este CSS reproduz o jeito como elas apareciam lá:
   capa, ícone 💌, título, coluna de 708 px, callouts coloridos, divisórias.
   As cartinhas de 26/06 em diante são HTML próprio e não usam este arquivo. */
:root {
  --n-text: rgb(55, 53, 47);
  --n-muted: rgba(55, 53, 47, .65);
  --n-line: rgba(55, 53, 47, .16);
  --n-gray: rgb(120, 119, 116);    --n-gray-bg: rgb(241, 241, 239);
  --n-brown: rgb(159, 107, 83);    --n-brown-bg: rgb(244, 238, 238);
  --n-orange: rgb(217, 115, 13);   --n-orange-bg: rgb(251, 236, 221);
  --n-yellow: rgb(203, 145, 47);   --n-yellow-bg: rgb(251, 243, 219);
  --n-green: rgb(68, 131, 97);     --n-green-bg: rgb(237, 243, 236);
  --n-blue: rgb(51, 126, 169);     --n-blue-bg: rgb(231, 243, 248);
  --n-purple: rgb(144, 101, 176);  --n-purple-bg: rgb(244, 240, 247);
  --n-pink: rgb(193, 76, 138);     --n-pink-bg: rgb(249, 238, 243);
  --n-red: rgb(212, 76, 71);       --n-red-bg: rgb(253, 235, 236);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #fff; color: var(--n-text);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 16px; line-height: 1.5; -webkit-font-smoothing: auto;
}
a { color: inherit; text-decoration: underline; text-decoration-color: rgba(55, 53, 47, .4); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
img, video { max-width: 100%; }

/* Capa, ícone e título */
.n-cover { width: 100%; height: 30vh; min-height: 180px; max-height: 280px; overflow: hidden; }
.n-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.n-page { max-width: 900px; margin: 0 auto; padding: 0 96px 30vh; }
.n-icon { font-size: 78px; line-height: 1.1; height: 78px; margin-top: -42px; position: relative; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.n-page.sem-capa .n-icon { margin-top: 80px; }
.n-title { font-size: 40px; font-weight: 700; line-height: 1.2; margin: 24px 0 18px; padding: 3px 2px; }

/* Blocos */
.n-block { margin: 5px 0; padding: 3px 2px; min-height: 1em; white-space: pre-wrap; word-break: break-word; }
.n-vazio { min-height: 30px; }
h2.n-h1, h2.n-h2, h3.n-h3 { font-weight: 600; line-height: 1.3; padding: 3px 2px; margin: 0; white-space: pre-wrap; }
h2.n-h1 { font-size: 1.875em; margin-top: 2em; margin-bottom: 4px; }
h2.n-h2 { font-size: 1.5em; margin-top: 1.4em; margin-bottom: 1px; }
h3.n-h3 { font-size: 1.25em; margin-top: 1em; margin-bottom: 1px; }
hr.n-hr { border: 0; border-top: 1px solid var(--n-line); margin: 13px 0; }
.n-quote { border-left: 3px solid currentColor; padding: 0 14px; margin: 6px 0; font-size: 1.2em; white-space: pre-wrap; }
.n-callout { display: flex; gap: 8px; padding: 16px 16px 16px 12px; border-radius: 10px; margin: 4px 0; background: var(--n-gray-bg); border: 1px solid transparent; }
.n-callout > .ic { flex: none; width: 24px; font-size: 1.2em; line-height: 1.25; text-align: center; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.n-callout > .ct { flex: 1; min-width: 0; }
.n-callout > .ct > .n-block:first-child { padding-top: 0; }
.n-list { margin: 1px 0; padding-left: 1.7em; }
.n-list > li { padding: 3px 2px 3px 0; white-space: pre-wrap; }
.n-list > li > .n-list { margin-top: 2px; }
ul.n-list { list-style: disc; } ul.n-list ul.n-list { list-style: circle; } ul.n-list ul.n-list ul.n-list { list-style: square; }
ol.n-list { list-style: decimal; } ol.n-list ol.n-list { list-style: lower-alpha; } ol.n-list ol.n-list ol.n-list { list-style: lower-roman; }
.n-cols { display: flex; gap: 46px; margin: 2px 0; }
.n-col { flex: 1 1 0; min-width: 0; }
.n-fig { margin: 8px 0; }
.n-fig img, .n-fig video { display: block; height: auto; border-radius: 2px; }
.n-fig figcaption { font-size: 14px; color: var(--n-muted); padding: 6px 2px 0; white-space: pre-wrap; }
.n-video { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.n-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 2px; }
.n-pagelink { display: inline-flex; gap: 6px; align-items: center; padding: 3px 2px; text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--n-line); }
code.n-code { font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-size: 85%; background: rgba(135, 131, 120, .15); color: #eb5757; border-radius: 4px; padding: .2em .4em; }

/* Navegação entre cartinhas (o Anterior / Próxima em itálico, em duas colunas, como no Notion) */
.n-nav { display: flex; gap: 46px; margin-top: 2.5em; padding-top: 1em; border-top: 1px solid var(--n-line); }
.n-nav > span { flex: 1 1 0; }
.n-nav a { font-style: italic; }

/* Cores de texto e de fundo do Notion */
.c-gray { color: var(--n-gray); } .c-brown { color: var(--n-brown); } .c-orange { color: var(--n-orange); }
.c-yellow { color: var(--n-yellow); } .c-green { color: var(--n-green); } .c-blue { color: var(--n-blue); }
.c-purple { color: var(--n-purple); } .c-pink { color: var(--n-pink); } .c-red { color: var(--n-red); }
.b-default { background: transparent; }
.b-gray { background: var(--n-gray-bg); } .b-brown { background: var(--n-brown-bg); } .b-orange { background: var(--n-orange-bg); }
.b-yellow { background: var(--n-yellow-bg); } .b-green { background: var(--n-green-bg); } .b-blue { background: var(--n-blue-bg); }
.b-purple { background: var(--n-purple-bg); } .b-pink { background: var(--n-pink-bg); } .b-red { background: var(--n-red-bg); }
.n-callout.b-default { background: transparent; border-color: var(--n-line); }

@media (max-width: 720px) {
  .n-page { padding: 0 24px 20vh; }
  .n-icon { font-size: 64px; height: 64px; margin-top: -34px; }
  .n-title { font-size: 32px; }
  .n-cols, .n-nav { flex-direction: column; gap: 0; }
}