/* =========================================================
   ESTILO GERAL – BLOG LITERÁRIO / ARMORIAL LEVE
========================================================= */

:root {

    /* TIPOGRAFIA */
  
    --font-body: "Times New Roman", Georgia, serif;
    --font-ui: system-ui, sans-serif;
    --font-mono: "Courier New", monospace;
  
    /* CORES */
  
    --color-text: #2a2a2a;
    --color-muted: #6b6b6b;
  
    --color-bg: #f6f3ef;
    --color-card: #ffffff;
  
    --color-border: #0A014F;
  
    --color-link: #1f4e79;        /* azul profundo */
    --color-link-hover: #b35c2e;  /* terracota */
  
    --color-tag-bg: #efeae3;
  
    --shadow-soft: 0 6px 18px rgba(0,0,0,0.05);
  
  }
  
  /* =========================================================
     FUNDO
  ========================================================= */
  
  body {
  
    font-family: var(--font-body);
    color: var(--color-text);
  
    background:
      radial-gradient(#00000008 1px, transparent 1px),
      var(--color-bg);
  
    background-size: 24px 24px;
  
    max-width: 90ch;
    margin: 60px auto;
    padding: 0 1rem;
  
    line-height: 1.7;
  
  }
  
  /* linha decorativa armorial */
  
  body::before{
  
    content:"";
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:4px;
  
    background:linear-gradient(
      90deg,
      #b35c2e,
      #d8a46f
    );
  
  }
  
  /* =========================================================
     LINKS
  ========================================================= */
  
  a {
  
    color: var(--color-link);
    text-decoration: none;
  
    border-bottom: 1px solid transparent;
  
    transition: color .2s ease,
                border .2s ease;
  
  }
  
  a:hover {
  
    color: var(--color-link-hover);
    border-bottom: 1px solid var(--color-link-hover);
  
  }
  
  /* =========================================================
     TÍTULOS
  ========================================================= */
  
  h1,h2,h3{
  
    font-family: var(--font-body);
    color: var(--color-text);
  
    font-weight:700;
  
    line-height:1.3;
  
    margin-top:1.4em;
    margin-bottom:.4em;
  
  }
  
  h1{
  
    font-size:2rem;
    letter-spacing:.02em;
  
  }
  
  h2{
  
    font-size:1.35rem;
  
    border-bottom:none;
    position:relative;
    padding-bottom:.4em;
  
  }
  
  h2::after{
  
    content:"";
  
    display:block;
    width:40px;
    height:2px;
  
    background:var(--color-link);
  
    margin-top:6px;
  
  }
  
  h3{
  
    font-size:1.1rem;
  
  }
  
  /* =========================================================
     NAVEGAÇÃO
  ========================================================= */
  
  header{
  
    margin-bottom:2.5rem;
  
  }
  
  nav ul{
  
    list-style:none;
  
    display:flex;
    flex-wrap:wrap;
  
    gap:1.2em;
  
    padding:0;
    margin:.5em 0 1.8em;
  
    border-bottom:1px solid var(--color-border);
    padding-bottom:.8em;
  
  }
  
  nav a{
  
    font-family:var(--font-ui);
  
    font-size:.95rem;
  
    letter-spacing:.03em;
  
  }
  
  /* =========================================================
     TEXTO
  ========================================================= */
  
  p{
  
    margin:1em 0;
  
  }
  
  ul,ol{
  
    margin:.8em 0 .8em 1.4em;
  
  }
  
  code{
  
    font-family:var(--font-mono);
    background:#f3f3f3;
  
    padding:.2em .4em;
  
    border-radius:4px;
  
  }
  
  pre{
  
    padding:1em;
    overflow-x:auto;
  
  }
  
  /* =========================================================
     DROP CAP (estética editorial)
  ========================================================= */
  
  .blog-post p:first-child::first-letter{
  
    font-size:3em;
    float:left;
  
    margin-right:8px;
  
    line-height:1;
  
    font-weight:700;
  
  }
  
  /* =========================================================
     POSTS
  ========================================================= */
  
  .blog-post{
  
    text-align:justify;
  
    background:var(--color-card);
  
    padding:1.6rem;
  
    border-radius:16px;
  
    box-shadow:var(--shadow-soft);
  
  }
  
  /* =========================================================
     POESIA
  ========================================================= */
  
  .poem-post{
  
    background:#faf8f4;
  
    padding:2rem;
  
    border-radius:20px;
  
    border-left:3px solid var(--color-link);
  
    text-align:center;
  
  }
  
  .poem-post .poem{
  
    line-height:1.9;
    font-style:italic;
  
  }
  
  /* =========================================================
     CARDS
  ========================================================= */
  
  .nice-box{
  
    background:var(--color-card);
  
    border:2px solid var(--color-border);
  
    margin-bottom:2em;
  
    border-radius:16px;
  
    padding:1.5rem;
  
    box-shadow:var(--shadow-soft);
  
    transition:transform .2s ease,
               box-shadow .2s ease;
  
  }
  
  .nice-box:hover{
  
    transform:translateY(-4px);
  
    box-shadow:0 12px 28px rgba(0,0,0,.08);
  
  }
  
  /* =========================================================
     MÍDIA
  ========================================================= */
  
  article.media-box{
  
    background:var(--color-card);
  
    border:2px solid var(--color-border);
  
    margin-bottom:2em;
  
    border-radius:16px 16px 0 0;
  
    /* padding:1rem; */
  
    box-shadow:var(--shadow-soft);
  
    text-align:center;
  
  }
  
  article.media-box img{
  
    width: 100%;
    border: 0;
    padding: 0;
    /* height: 100%; */
    display:block;
    /* display: cover; */
  
  }
  
  /* =========================================================
     TAGS
  ========================================================= */
  
  a[rel='tag']{
  
    display:inline-block;
  
    background:var(--color-tag-bg);
  
    color:#5a4a3a;
  
    font-size:.8rem;
  
    padding:4px 12px;
  
    margin:2px;
  
    border-radius:999px;
  
    text-decoration:none;
  
    transition:background .2s;
  
  }
  
  a[rel='tag']:hover{
  
    background:var(--color-link);
    color:white;
  
  }
  
  /* =========================================================
     GRID
  ========================================================= */
  
  .grid{
  
    display:grid;
  
    grid-template-columns:
      repeat(auto-fill,minmax(280px,1fr));
  
    gap:1.2rem;
  
  
  }
  
  /* =========================================================
     CARROSSEL
  ========================================================= */
  
  .carousel{
  
    display:flex;
  
    overflow-x:auto;
  
    scroll-snap-type:x mandatory;
  
    gap:10px;
  
    max-width:100%;
  
    padding:0 5%;
  
    scrollbar-width:none;
  
  }
  
  .carousel::-webkit-scrollbar{
  
    display:none;
  
  }
  
  .slide{
  
    flex:0 0 100%;
    scroll-snap-align:center;
  
  }
  
  .slide img,
  .slide video{
  
    width:100%;
    max-height:auto;
  
    display:block;
  
    border-radius:12px;
  
    max-height:80vh;
  
    object-fit:contain;
  
  }
  
  /* =========================================================
     FOOTER
  ========================================================= */
  
  footer{
  
    text-align:center;
  
    color:var(--color-muted);
  
    font-size:.85rem;
  
    margin-top:4rem;
  
    border-top:1px solid var(--color-border);
  
    padding-top:1.5rem;
  
    opacity:.8;
  
  }
  
  /* =========================================================
     RESPONSIVO
  ========================================================= */
  
  @media (max-width:600px){
  
    body{
      margin:40px auto;
    }
  
  }
  
  /* =========================================================
     DARK MODE
  ========================================================= */
  
  @media (prefers-color-scheme:dark){
  
    :root{
  
      --color-text:#e8e6e3;
      --color-muted:#aaa;
  
      --color-bg:#141414;
      --color-card:#1d1d1d;
  
      --color-border:#333;
  
      --color-link:#7fb1ff;
      --color-link-hover:#ff9b6a;
  
    }
  
    code{
      background:#222;
    }
  
  }


img.u-photo {
    border-radius: 50%;
    width: 100%;
    object-fit: cover;
    border: 2px solid var(--color-border);
    max-width: 10em;
    max-height: 10em;
}


video {
    object-fit: cover;
    max-width: 100%;
}