/* =====================================================
   ORRULAS · STYLE.CSS
   Poemas, caderno e páginas do site
   ===================================================== */

/* =====================================================
   FONTES
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@400;500;600&display=swap');


/* =====================================================
   VARIÁVEIS · MODO NOITE
   ===================================================== */

:root {
    --blue-deep: #071b2a;
    --blue: #0d2b3c;
    --blue-soft: #16465a;

    --green-dark: #153d32;
    --green: #326b52;
    --green-light: #789b7c;

    --mist: #cfe0d7;
    --white-green: #e2eee8;
    --muted: #9eb9b0;

    --line: rgba(207, 224, 215, .18);
    --glass: rgba(5, 20, 29, .42);
    --shadow: rgba(0, 0, 0, .40);

    --content-width: 1080px;
    --wide-width: 1180px;
    --page-padding: 1.25rem;
}


/* =====================================================
   RESET
   ===================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(67, 117, 113, .22),
            transparent 38rem
        ),
        linear-gradient(
            145deg,
            var(--blue-deep),
            var(--blue) 55%,
            var(--green-dark)
        );

    background-attachment: fixed;

    color: var(--white-green);

    font-family:
        "Inter",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height: 1.7;

    cursor:
        url("imagens/cursor.png") 8 8,
        auto;

    transition:
        background .45s ease,
        color .45s ease;
}


/* =====================================================
   CURSOR
   ===================================================== */

html,
body,
a,
button,
input,
textarea,
select,
label {
    cursor:
        url("imagens/cursor.png") 8 8,
        auto;
}


/* =====================================================
   SELEÇÃO
   ===================================================== */

::selection {
    background: var(--green-light);
    color: var(--blue-deep);
}


/* =====================================================
   LINKS
   ===================================================== */

a {
    color: var(--mist);
    text-decoration: none;
    border-bottom: 1px solid transparent;

    transition:
        color .25s ease,
        border-color .25s ease,
        transform .25s ease,
        opacity .25s ease;
}

a:hover,
a:focus-visible {
    color: #fff;
    border-bottom-color: var(--green-light);
}


/* =====================================================
   FOCUS
   ===================================================== */

:focus-visible {
    outline: 2px solid var(--green-light);
    outline-offset: 4px;
}


/* =====================================================
   ACESSIBILIDADE
   ===================================================== */

.skip-link {
    position: fixed;
    left: 1rem;
    top: -5rem;
    z-index: 9999;

    padding: .7rem 1rem;

    background: var(--white-green);
    color: var(--blue-deep);

    border-radius: .4rem;
}

.skip-link:focus {
    top: 1rem;
}


/* =====================================================
   TIPOGRAFIA
   ===================================================== */

h1,
h2,
h3 {
    margin-top: 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-weight: 500;
    line-height: 1.05;
}

h1 {
    font-size: clamp(3rem, 8vw, 6.5rem);
}

h2 {
    font-size: clamp(2.4rem, 5vw, 4rem);
}

h3 {
    font-size: 2rem;
}

p {
    margin-top: 0;
}


/* =====================================================
   HEADER
   ===================================================== */

.site-header {
    position: relative;
    z-index: 100;

    border-bottom: 1px solid var(--line);

    background: rgba(4, 18, 26, .18);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    transition:
        background .4s ease,
        border-color .4s ease;
}

.header-inner {
    width: min(var(--wide-width), calc(100% - 2.5rem));
    min-height: 76px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 2rem;
}

.site-logo {
    flex-shrink: 0;

    border: 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 1.6rem;
    letter-spacing: .08em;
}

.site-logo:hover {
    border: 0;
}


/* =====================================================
   NAVEGAÇÃO
   ===================================================== */

.main-nav {
    display: flex;
    align-items: center;

    gap: 1.5rem;

    list-style: none;
    padding: 0;
    margin: 0;
}

.main-nav a {
    color: var(--muted);

    font-size: .8rem;
    letter-spacing: .04em;

    white-space: nowrap;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a[aria-current="page"] {
    color: var(--white-green);
}


/* =====================================================
   BOTÃO DE TEMA
   ===================================================== */

.theme-button {
    width: 38px;
    height: 38px;

    flex: 0 0 auto;

    border: 1px solid var(--line);
    border-radius: 50%;

    background: transparent;
    color: var(--mist);

    font-size: 1rem;

    cursor:
        url("imagens/cursor.png") 8 8,
        pointer;

    transition:
        background .25s ease,
        transform .25s ease,
        border-color .25s ease,
        color .25s ease;
}

.theme-button:hover {
    background: var(--glass);

    border-color:
        rgba(120, 155, 124, .5);

    transform: rotate(-12deg);
}


/* =====================================================
   HERO
   ===================================================== */

.hero {
    min-height: calc(100vh - 76px);

    position: relative;

    display: grid;
    place-items: center;

    overflow: hidden;

    padding: 5rem 1.5rem;
}

.hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            ellipse at center,
            transparent 10%,
            rgba(3, 13, 20, .35) 70%,
            rgba(3, 13, 20, .8)
        );

    z-index: 1;
    pointer-events: none;
}

.hero-image {
    position: absolute;
    inset: 0;

    display: grid;
    place-items: center;

    pointer-events: none;
}

.hero-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(7, 27, 42, .12),
            rgba(7, 27, 42, .05) 50%,
            rgba(7, 27, 42, .8)
        );
}

.tree-image {
    width: min(900px, 100%);
    height: 100%;

    object-fit: contain;

    opacity: .88;

    filter:
        saturate(.88)
        contrast(.96)
        drop-shadow(
            0 2rem 4rem var(--shadow)
        );

    transition:
        opacity .4s ease,
        filter .4s ease;
}


/* =====================================================
   HERO · TEXTO
   ===================================================== */

.hero-content {
    position: relative;
    z-index: 2;

    width: min(850px, 100%);

    text-align: center;

    padding: 3rem 1rem;

    text-shadow:
        0 4px 35px rgba(0, 0, 0, .65);

    animation:
        fadeUp 1s ease both;
}

.small-title {
    margin: 0 0 1.2rem;

    color: var(--green-light);

    text-transform: uppercase;
    letter-spacing: .28em;

    font-size: .68rem;
}

.hero h1 {
    margin: 0;
}

.hero h1 span {
    color: var(--mist);
}

.title-line {
    width: 70px;
    height: 1px;

    margin: 2rem auto;

    background: var(--green-light);
}

.author {
    margin: 0 0 1.2rem;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 1.6rem;
}

.hero-description {
    width: min(560px, 100%);

    margin: 0 auto 2rem;

    color: var(--mist);
}


/* =====================================================
   BOTÃO PRINCIPAL
   ===================================================== */

.primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: .8rem;

    padding: .8rem 1.3rem;

    border: 1px solid var(--line);
    border-radius: 999px;

    background: rgba(7, 27, 42, .45);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    box-shadow:
        0 10px 35px rgba(0, 0, 0, .15);
}

.primary-button:hover {
    background:
        rgba(50, 107, 82, .35);

    border-color:
        rgba(207, 224, 215, .35);

    transform: translateY(-2px);
}


/* =====================================================
   CONTAINERS
   ===================================================== */

.section-container {
    width: min(var(--content-width), calc(100% - 2.5rem));
    margin: 0 auto;
}


/* =====================================================
   SECÇÕES
   ===================================================== */

.intro-section,
.featured-section {
    padding: 7rem 0;
}

.intro-section {
    border-top: 1px solid var(--line);
}

.section-label {
    margin-bottom: 1rem;

    color: var(--green-light);

    text-transform: uppercase;
    letter-spacing: .17em;

    font-size: .68rem;
}

.intro-section h2 {
    width: min(850px, 100%);
    margin-bottom: 4rem;
}

.intro-section h2 em {
    color: var(--green-light);
    font-style: normal;
}

.intro-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 4rem;
}

.intro-grid p {
    color: var(--muted);
}

.text-link {
    display: inline-flex;
    align-items: center;

    gap: .6rem;
    margin-top: 1rem;

    font-size: .85rem;
}


/* =====================================================
   CABEÇALHOS DE SECÇÃO
   ===================================================== */

.section-heading {
    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 2rem;
    margin-bottom: 3rem;
}

.section-heading h2 {
    margin: 0;
}


/* =====================================================
   CARTÕES DE POEMAS
   ===================================================== */

.poem-cards {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 1rem;
}

.poem-card {
    min-height: 340px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 1.6rem;

    border: 1px solid var(--line);
    border-radius: 1rem;

    background:
        linear-gradient(
            145deg,
            rgba(5, 20, 29, .42),
            rgba(18, 52, 57, .18)
        );

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    box-shadow:
        0 15px 50px rgba(0, 0, 0, .08);

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.poem-card:hover {
    transform: translateY(-7px);

    background:
        linear-gradient(
            145deg,
            rgba(18, 52, 57, .5),
            rgba(50, 107, 82, .18)
        );

    border-color:
        rgba(120, 155, 124, .4);

    box-shadow:
        0 20px 60px rgba(0, 0, 0, .18);
}

.poem-number {
    color: var(--green-light);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 1.4rem;
}

.poem-category {
    margin-bottom: .5rem;

    color: var(--green-light);

    text-transform: uppercase;
    letter-spacing: .15em;

    font-size: .65rem;
}

.poem-card h3 {
    margin: 0 0 1rem;
}

.poem-card p:not(.poem-category) {
    color: var(--muted);
    font-size: .9rem;
}

.poem-card a {
    font-size: .8rem;
}


/* =====================================================
   PÁGINA DE POEMAS
   ===================================================== */

.poems-intro {
    padding: 7rem 0 5rem;
}

.poems-intro h1 {
    width: min(850px, 100%);
    margin-bottom: 2rem;
}

.poems-intro h1 em {
    color: var(--green-light);
    font-style: normal;
}

.poems-intro-text {
    width: min(600px, 100%);

    color: var(--muted);
    font-size: 1rem;
}

.poems-list {
    padding: 2rem 0 7rem;
}

.poems-heading {
    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 2rem;
    margin-bottom: 3rem;
}

.poems-heading h2 {
    margin: 0;
}

.poems-count {
    color: var(--muted);

    font-size: .75rem;
    letter-spacing: .08em;
}


/* =====================================================
   CITAÇÃO
   ===================================================== */

.quote-section {
    padding: 9rem 1.5rem;

    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);

    background: rgba(4, 18, 26, .2);
}

.quote-inner {
    width: min(800px, 100%);
    margin: 0 auto;

    text-align: center;
}

.quote-mark {
    display: block;

    color: var(--green-light);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 5rem;
    line-height: .5;
}

.quote-inner blockquote {
    margin: 2rem 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1.15;
}

.quote-inner em {
    color: var(--mist);
    font-style: normal;
}

.quote-end {
    transform: rotate(180deg);
}


/* =====================================================
   POEMA INDIVIDUAL
   ===================================================== */

.single-poem {
    width: min(900px, calc(100% - 2.5rem));

    margin: 0 auto;

    padding: 7rem 0 5rem;
}

.poem-header {
    text-align: center;
    margin-bottom: 4rem;

    animation:
        poemFadeIn 1s ease both;
}

.poem-header .section-label {
    margin-bottom: 1.2rem;
}

.poem-header h1 {
    margin: 0 0 1rem;

    font-size: clamp(3.5rem, 9vw, 6.5rem);
    font-weight: 500;
    line-height: .95;

    color: var(--white-green);
}

.poem-date {
    margin: 0;

    color: var(--muted);

    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}


/* =====================================================
   IMAGEM DO POEMA
   ===================================================== */

.poem-image {
    width: 100%;

    margin: 0 auto 5rem;

    position: relative;
    overflow: hidden;

    border-radius: 6px;

    background: var(--green-dark);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .25);

    animation:
        poemFadeIn 1.2s .15s ease both;
}

.poem-image::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(7, 27, 42, .02),
            rgba(7, 27, 42, .2)
        );
}

.poem-image img {
    display: block;

    width: 100%;
    height: 460px;

    object-fit: cover;

    opacity: .92;

    filter:
        saturate(.8)
        contrast(.95);

    transition:
        transform 1.2s ease,
        filter 1.2s ease;
}

.poem-image:hover img {
    transform: scale(1.025);

    filter:
        saturate(.95)
        contrast(1);
}


/* =====================================================
   TEXTO DO POEMA
   ===================================================== */

.poem-text {
    width: min(620px, 100%);

    margin: 0 auto;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(1.25rem, 2vw, 1.5rem);
    line-height: 2;

    color: var(--white-green);

    animation:
        poemFadeIn 1.2s .3s ease both;
}

.poem-text p {
    margin: 0 0 2.8rem;
}

.poem-text p:last-child {
    margin-bottom: 0;
}

.poem-text::before {
    content: "✦";

    display: block;
    width: fit-content;

    margin: 0 auto 3rem;

    color: var(--green-light);

    font-size: .8rem;
    opacity: .75;
}


/* =====================================================
   PRIMEIRA LETRA
   ===================================================== */

.poem-text p:first-child::first-letter {
    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 3.8rem;

    float: left;
    line-height: .75;

    padding-right: .35rem;

    color: var(--green-light);
}


/* =====================================================
   NAVEGAÇÃO ENTRE POEMAS
   ===================================================== */

.poem-navigation {
    width: min(720px, 100%);

    margin: 6rem auto 0;
    padding-top: 2rem;

    border-top: 1px solid var(--line);

    display: flex;
    justify-content: space-between;

    gap: 2rem;

    animation:
        poemFadeIn 1s .45s ease both;
}

.poem-navigation a {
    display: inline-flex;
    align-items: center;

    gap: .5rem;

    color: var(--muted);
    font-size: .78rem;
}

.poem-navigation a:hover {
    color: var(--white-green);
}

.poem-navigation a:first-child:hover {
    transform: translateX(-4px);
}

.poem-navigation a:last-child:hover {
    transform: translateX(4px);
}


/* =====================================================
   ARQUIVO
   ===================================================== */

.archive-list {
    width: min(900px, 100%);

    margin: 0 auto;

    display: flex;
    flex-direction: column;

    border-top: 1px solid var(--line);
}

.archive-entry {
    display: grid;

    grid-template-columns: 100px minmax(0, 1fr);

    gap: 3rem;

    padding: 2.5rem 0;

    border-bottom: 1px solid var(--line);
}

.archive-date {
    color: var(--green-light);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 1.2rem;
}

.archive-content {
    min-width: 0;
}

.archive-content h3 {
    margin: 0 0 1rem;
    font-size: 2rem;
}

.archive-content > p:not(.poem-category) {
    max-width: 650px;
    color: var(--muted);
}

.archive-toggle {
    margin-top: 1rem;
    padding: 0;

    border: 0;
    background: transparent;

    color: var(--mist);

    font-family: inherit;
    font-size: .8rem;
}

.archive-toggle:hover {
    color: var(--white-green);
}

.archive-toggle span {
    display: inline-block;

    margin-left: .5rem;

    transition:
        transform .25s ease;
}

.archive-toggle[aria-expanded="true"] span {
    transform: rotate(90deg);
}

.archive-hidden {
    display: none;

    max-width: 650px;

    margin-top: 2rem;
    padding-top: 1.5rem;

    border-top: 1px solid var(--line);

    color: var(--mist);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 1.25rem;
    line-height: 1.9;
}

.archive-hidden.is-open {
    display: block;
}


/* =====================================================
   CADERNO
   ===================================================== */

.poem-form {
    width: min(720px, 100%);

    margin: 0 auto;

    display: flex;
    flex-direction: column;

    gap: .8rem;
}

.poem-form label {
    margin-top: 1rem;

    color: var(--mist);

    font-size: .8rem;
    letter-spacing: .04em;
}

.poem-form input,
.poem-form textarea {
    width: 100%;

    border: 1px solid var(--line);
    border-radius: .7rem;

    padding: 1rem 1.1rem;

    background: rgba(5, 20, 29, .28);
    color: var(--white-green);

    font-family:
        "Inter",
        system-ui,
        sans-serif;

    font-size: .9rem;

    outline: none;

    resize: vertical;

    transition:
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.poem-form textarea {
    min-height: 180px;
}

.poem-form input:focus,
.poem-form textarea:focus {
    border-color: var(--green-light);

    background: rgba(5, 20, 29, .42);

    box-shadow:
        0 0 0 3px
        rgba(120, 155, 124, .08);
}

.poem-form input::placeholder,
.poem-form textarea::placeholder {
    color: var(--muted);
    opacity: .75;
}

.caderno-card {
    min-height: 300px;

    position: relative;
    overflow: hidden;
}

.caderno-card-top {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 1rem;
}

.caderno-date {
    color: var(--muted);

    font-size: .68rem;
    letter-spacing: .08em;
}

.caderno-message {
    flex: 1;

    display: flex;
    align-items: center;

    padding: 2rem 0;
}

.caderno-message p {
    margin: 0;

    white-space: pre-wrap;

    color: var(--white-green);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(1.25rem, 2vw, 1.55rem);
    line-height: 1.7;
}

.caderno-author {
    margin: 0 0 1.2rem !important;

    color: var(--green-light) !important;

    font-size: .75rem !important;
    letter-spacing: .04em;
}

.delete-entry {
    position: absolute;

    right: 1.2rem;
    bottom: 1rem;

    border: 0;
    background: transparent;

    color: var(--muted);

    font-family: inherit;
    font-size: .68rem;

    opacity: 0;

    transition:
        opacity .25s ease,
        color .25s ease;
}

.caderno-card:hover .delete-entry,
.delete-entry:focus-visible {
    opacity: 1;
}

.delete-entry:hover {
    color: #d9a3a3;
}

.caderno-vazio {
    grid-column: 1 / -1;

    padding: 3rem 1rem;

    text-align: center;

    color: var(--muted);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 1.4rem;
}


/* =====================================================
   404
   ===================================================== */

.not-found {
    min-height: calc(100vh - 76px);

    display: grid;
    place-items: center;

    padding: 6rem 1.5rem;

    position: relative;
    overflow: hidden;
}

.not-found-content {
    width: min(760px, 100%);

    margin: 0 auto;

    text-align: center;

    animation:
        fadeUp 1s ease both;
}

.not-found-number {
    margin: 1rem 0 0;

    color: var(--green-light);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(6rem, 20vw, 13rem);
    font-weight: 400;

    line-height: .75;

    opacity: .22;
    user-select: none;
}

.not-found h1 {
    margin: 2rem auto 0;

    max-width: 700px;

    font-size: clamp(3rem, 7vw, 5.5rem);
    line-height: .95;
}

.not-found h1 em {
    display: block;

    color: var(--green-light);
    font-style: normal;
}

.not-found .title-line {
    margin: 2rem auto;
}

.not-found-text {
    width: min(560px, 100%);

    margin: 0 auto 1rem;

    color: var(--muted);
    font-size: .95rem;
}

.not-found .primary-button {
    margin-top: 1.5rem;
}


/* =====================================================
   FOOTER
   ===================================================== */

.site-footer {
    padding: 4rem 0;

    border-top: 1px solid var(--line);
}

.footer-inner {
    width: min(var(--content-width), calc(100% - 2.5rem));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1.2fr 1fr 1fr;

    gap: 2rem;
}

.footer-logo {
    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 1.5rem;

    border: 0;
}

.footer-inner p {
    margin: .4rem 0;

    color: var(--muted);
    font-size: .75rem;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.footer-links a {
    width: fit-content;
    font-size: .8rem;
}

.footer-small {
    text-align: right;
}


/* =====================================================
   FOLHAS
   ===================================================== */

.falling-leaf {
    position: fixed;

    top: -60px;

    z-index: 50;

    pointer-events: none;
    user-select: none;

    width: 18px;
    height: auto;

    animation-name: fallingLeaf;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    filter:
        sepia(25%)
        saturate(70%)
        hue-rotate(75deg)
        brightness(85%);
}

@keyframes fallingLeaf {
    0% {
        transform:
            translate3d(0, -60px, 0)
            rotate(0deg);
    }

    25% {
        transform:
            translate3d(45px, 25vh, 0)
            rotate(90deg);
    }

    50% {
        transform:
            translate3d(-35px, 50vh, 0)
            rotate(180deg);
    }

    75% {
        transform:
            translate3d(45px, 75vh, 0)
            rotate(270deg);
    }

    100% {
        transform:
            translate3d(-20px, 110vh, 0)
            rotate(360deg);
    }
}


/* =====================================================
   ☀ MODO DIA · AZUL
   ===================================================== */

body.light-mode {
    --blue-deep: #d9e8f2;
    --blue: #c7dce9;
    --blue-soft: #9fbfd2;

    --green-dark: #254f61;
    --green: #326b7f;
    --green-light: #477d94;

    --mist: #183747;
    --white-green: #102a38;
    --muted: #4d6877;

    --line: rgba(24, 55, 71, .20);
    --glass: rgba(190, 215, 230, .55);
    --shadow: rgba(20, 55, 75, .18);

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(92, 145, 174, .35),
            transparent 38rem
        ),
        linear-gradient(
            145deg,
            #dcebf4,
            #c7dce9 55%,
            #b2cedd
        );

    color: var(--white-green);
}


/* =====================================================
   HEADER · DIA
   ===================================================== */

body.light-mode .site-header {
    background: rgba(190, 216, 231, .72);

    border-bottom-color:
        rgba(24, 55, 71, .18);

    box-shadow:
        0 5px 25px
        rgba(30, 70, 90, .08);
}

body.light-mode .main-nav a {
    color: #4d6877;
}

body.light-mode .main-nav a:hover,
body.light-mode .main-nav a:focus-visible,
body.light-mode .main-nav a[aria-current="page"] {
    color: #102a38;
}


/* =====================================================
   LINKS · DIA
   ===================================================== */

body.light-mode a {
    color: #254b5e;
}

body.light-mode a:hover,
body.light-mode a:focus-visible {
    color: #102a38;
    border-bottom-color: #477d94;
}


/* =====================================================
   HERO · DIA
   ===================================================== */

body.light-mode .hero::before {
    background:
        radial-gradient(
            ellipse at center,
            transparent 10%,
            rgba(210, 231, 242, .08) 55%,
            rgba(120, 165, 188, .28)
        );
}

body.light-mode .hero-image::after {
    background:
        linear-gradient(
            to bottom,
            rgba(210, 231, 242, .05),
            rgba(190, 218, 232, .08) 50%,
            rgba(150, 188, 207, .55)
        );
}

body.light-mode .tree-image {
    opacity: .82;

    filter:
        saturate(.85)
        contrast(.94)
        drop-shadow(
            0 2rem 4rem
            rgba(25, 65, 85, .20)
        );
}

body.light-mode .hero-content {
    text-shadow:
        0 3px 20px
        rgba(255, 255, 255, .45);
}

body.light-mode .hero h1 {
    color: #102a38;
}

body.light-mode .hero h1 span {
    color: #294e60;
}

body.light-mode .hero-description {
    color: #405f70;
}

body.light-mode .author {
    color: #183747;
}


/* =====================================================
   BOTÕES · DIA
   ===================================================== */

body.light-mode .primary-button {
    background: rgba(205, 226, 238, .65);

    border-color:
        rgba(45, 92, 113, .25);

    color: #183747;

    box-shadow:
        0 10px 35px
        rgba(30, 70, 90, .12);
}

body.light-mode .primary-button:hover {
    background: rgba(160, 198, 216, .65);

    border-color:
        rgba(45, 92, 113, .4);

    color: #102a38;
}

body.light-mode .theme-button {
    background: rgba(190, 216, 231, .70);

    color: #254b5e;

    border-color:
        rgba(35, 78, 98, .25);
}

body.light-mode .theme-button:hover {
    background: rgba(157, 198, 217, .75);
}


/* =====================================================
   TEXTOS · DIA
   ===================================================== */

body.light-mode .section-label,
body.light-mode .poem-category,
body.light-mode .poem-number {
    color: #477d94;
}

body.light-mode .intro-grid p,
body.light-mode .poem-card p:not(.poem-category),
body.light-mode .poems-intro-text {
    color: #4d6877;
}

body.light-mode .intro-section h2 em,
body.light-mode .poems-intro h1 em {
    color: #477d94;
}


/* =====================================================
   CARTÕES · DIA
   ===================================================== */

body.light-mode .poem-card {
    background:
        linear-gradient(
            145deg,
            rgba(194, 220, 234, .70),
            rgba(164, 199, 217, .52)
        );

    border-color:
        rgba(35, 78, 98, .20);

    box-shadow:
        0 15px 50px
        rgba(30, 70, 90, .10);
}

body.light-mode .poem-card:hover {
    background:
        linear-gradient(
            145deg,
            rgba(211, 231, 241, .82),
            rgba(157, 198, 217, .68)
        );

    border-color:
        rgba(50, 107, 130, .40);

    box-shadow:
        0 20px 60px
        rgba(30, 70, 90, .16);
}

body.light-mode .poem-card h3 {
    color: #102a38;
}


/* =====================================================
   CITAÇÃO · DIA
   ===================================================== */

body.light-mode .quote-section {
    background: rgba(174, 205, 221, .30);

    border-color:
        rgba(24, 55, 71, .18);
}

body.light-mode .quote-mark {
    color: #477d94;
}

body.light-mode .quote-inner blockquote {
    color: #183747;
}

body.light-mode .quote-inner em {
    color: #31586a;
}


/* =====================================================
   POEMA · DIA
   ===================================================== */

body.light-mode .poem-header h1,
body.light-mode .poem-text {
    color: #183747;
}

body.light-mode .poem-date {
    color: #4d6877;
}

body.light-mode .poem-text::before,
body.light-mode .poem-text p:first-child::first-letter {
    color: #477d94;
}

body.light-mode .poem-navigation {
    border-top-color:
        rgba(24, 55, 71, .18);
}

body.light-mode .poem-navigation a {
    color: #4d6877;
}

body.light-mode .poem-navigation a:hover {
    color: #102a38;
}


/* =====================================================
   IMAGENS · DIA
   ===================================================== */

body.light-mode .poem-image {
    background: #9fbfd2;

    box-shadow:
        0 25px 70px
        rgba(30, 70, 90, .18);
}

body.light-mode .poem-image::after {
    background:
        linear-gradient(
            to bottom,
            rgba(205, 228, 239, .02),
            rgba(65, 105, 125, .18)
        );
}


/* =====================================================
   ARQUIVO · DIA
   ===================================================== */

body.light-mode .archive-list,
body.light-mode .archive-entry {
    border-color:
        rgba(24, 55, 71, .18);
}

body.light-mode .archive-date {
    color: #477d94;
}

body.light-mode .archive-content > p:not(.poem-category) {
    color: #4d6877;
}

body.light-mode .archive-hidden {
    color: #31586a;

    border-top-color:
        rgba(24, 55, 71, .18);
}


/* =====================================================
   CADERNO · DIA
   ===================================================== */

body.light-mode .poem-form input,
body.light-mode .poem-form textarea {
    background: rgba(194, 220, 234, .62);

    color: #183747;

    border-color:
        rgba(35, 78, 98, .22);
}

body.light-mode .poem-form input:focus,
body.light-mode .poem-form textarea:focus {
    background: rgba(211, 231, 241, .78);

    border-color: #477d94;

    box-shadow:
        0 0 0 3px
        rgba(71, 125, 148, .12);
}

body.light-mode .poem-form input::placeholder,
body.light-mode .poem-form textarea::placeholder {
    color: #607988;
}

body.light-mode .caderno-message p {
    color: #183747;
}

body.light-mode .caderno-author {
    color: #477d94 !important;
}


/* =====================================================
   404 · DIA
   ===================================================== */

body.light-mode .not-found-number {
    color: #477d94;
}

body.light-mode .not-found h1 {
    color: #102a38;
}

body.light-mode .not-found h1 em {
    color: #477d94;
}

body.light-mode .not-found-text {
    color: #4d6877;
}


/* =====================================================
   FOOTER · DIA
   ===================================================== */

body.light-mode .site-footer {
    background: rgba(145, 183, 202, .20);

    border-top-color:
        rgba(24, 55, 71, .18);
}

body.light-mode .footer-inner p {
    color: #4d6877;
}

body.light-mode .footer-logo {
    color: #183747;
}


/* =====================================================
   FOLHAS · DIA
   ===================================================== */

body.light-mode .falling-leaf {
    filter:
        sepia(10%)
        saturate(55%)
        hue-rotate(160deg)
        brightness(90%);
}


/* =====================================================
   ANIMAÇÕES
   ===================================================== */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes poemFadeIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 850px) {

    .header-inner {
        gap: 1rem;
    }

    .main-nav {
        gap: .8rem;
    }

    .poem-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .poem-card:last-child {
        grid-column: 1 / -1;
    }

    .footer-inner {
        grid-template-columns: 1fr 1fr;
    }

    .footer-small {
        text-align: left;
    }

    .archive-entry {
        grid-template-columns: 80px minmax(0, 1fr);
        gap: 2rem;
    }
}


/* =====================================================
   TELEMÓVEL
   ===================================================== */

@media (max-width: 650px) {

    .header-inner {
        width: calc(100% - 1.5rem);

        min-height: auto;

        padding: 1rem 0;

        flex-wrap: wrap;

        position: relative;
    }

    .site-logo {
        width: 100%;
        padding-right: 3rem;
    }

    .main-nav {
        order: 3;

        width: 100%;

        overflow-x: auto;

        padding-bottom: .2rem;

        scrollbar-width: thin;
    }

    .main-nav a {
        white-space: nowrap;
    }

    .theme-button {
        position: absolute;

        top: 1rem;
        right: 0;
    }

    .hero {
        min-height: calc(100vh - 130px);

        padding: 3rem 1rem;
    }

    .hero-image {
        opacity: .65;
    }

    .tree-image {
        width: 120%;
        max-width: none;
    }

    .hero-content {
        padding: 4rem 0;
    }

    .hero h1 {
        font-size:
            clamp(
                2.7rem,
                13vw,
                4.5rem
            );
    }

    .hero-description {
        font-size: .9rem;
    }

    .intro-section,
    .featured-section {
        padding: 4.5rem 0;
    }

    .poems-intro {
        padding: 4.5rem 0 3rem;
    }

    .poems-list {
        padding: 1rem 0 4.5rem;
    }

    .intro-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .section-heading,
    .poems-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .poem-cards {
        grid-template-columns: 1fr;
    }

    .poem-card:last-child {
        grid-column: auto;
    }

    .quote-section {
        padding: 6rem 1rem;
    }

    .footer-inner {
        grid-template-columns: 1fr;
    }


    /* POEMA INDIVIDUAL */

    .single-poem {
        width: calc(100% - 2rem);

        padding: 4.5rem 0 3rem;
    }

    .poem-header {
        margin-bottom: 3rem;
    }

    .poem-header h1 {
        font-size:
            clamp(
                3rem,
                15vw,
                5rem
            );
    }

    .poem-image {
        margin-bottom: 3.5rem;
    }

    .poem-image img {
        height: 300px;
    }

    .poem-text {
        font-size: 1.25rem;
        line-height: 1.85;
    }

    .poem-text p {
        margin-bottom: 2.3rem;
    }

    .poem-navigation {
        margin-top: 4rem;

        flex-direction: column;
        align-items: stretch;
    }

    .poem-navigation a:last-child {
        justify-content: flex-end;
    }


    /* ARQUIVO */

    .archive-entry {
        grid-template-columns: 1fr;

        gap: .5rem;

        padding: 2rem 0;
    }

    .archive-date {
        font-size: 1rem;
    }

    .archive-content h3 {
        font-size: 1.8rem;
    }


    /* CADERNO */

    .caderno-card {
        min-height: 280px;
    }

    .caderno-message {
        padding: 1.5rem 0;
    }

    .caderno-message p {
        font-size: 1.3rem;
    }

    .delete-entry {
        opacity: 1;

        position: static;

        margin-top: .5rem;
    }


    /* 404 */

    .not-found {
        min-height: calc(100vh - 130px);

        padding: 4rem 1rem;
    }

    .not-found-number {
        font-size: 30vw;
    }

    .not-found h1 {
        font-size:
            clamp(
                2.8rem,
                13vw,
                4.5rem
            );
    }

    .not-found-text {
        font-size: .9rem;
    }
}


/* =====================================================
   ECRÃS MUITO PEQUENOS
   ===================================================== */

@media (max-width: 380px) {

    .header-inner {
        width: calc(100% - 1rem);
    }

    .main-nav {
        gap: .6rem;
    }

    .main-nav a {
        font-size: .72rem;
    }

    .hero {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .hero-content {
        padding-left: .25rem;
        padding-right: .25rem;
    }

    .single-poem {
        width: calc(100% - 1.5rem);
    }

    .poem-image img {
        height: 240px;
    }

    .poem-text {
        font-size: 1.15rem;
    }
}


/* =====================================================
   MENOS MOVIMENTO
   ===================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .falling-leaf {
        display: none;
    }
}


/* =====================================================
   SEM BACKDROP-FILTER
   ===================================================== */

@supports not (backdrop-filter: blur(1px)) {

    .site-header {
        background: rgba(4, 18, 26, .75);
    }

    .poem-card {
        background: rgba(5, 20, 29, .75);
    }

    .primary-button {
        background: rgba(7, 27, 42, .75);
    }
}