/* ============================================================
   ANEXO II — a obra publicada, na mesma folha da apresentação
   Reaproveita o vocabulário da ficha: papel osso, fios de tinta,
   dados com pontilhado, carimbo e fita adesiva.
   ============================================================ */

.anexo-livro {
    --nanquim: #101315;
    --osso: #F4F1E8;
    --lacre: #FF5A36;
    --tinta-fraca: rgba(16, 19, 21, .52);
    --regua: rgba(16, 19, 21, .8);
    --fio: rgba(16, 19, 21, .22);
    --mono: ui-monospace, SFMono-Regular, "Courier New", monospace;

    position: relative;
    box-sizing: border-box;
    background: var(--osso);
    color: var(--nanquim);
    font-family: "Space Grotesk", sans-serif;
    padding: clamp(38px, 7vw, 84px) 0;
    overflow: hidden;
}

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

/* grão do papel, o mesmo do hero */
.anexo-livro::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .38;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch' seed='4'/><feColorMatrix type='saturate' values='0'/></filter><rect width='300' height='300' filter='url(%23g)' opacity='0.5'/></svg>");
    background-size: 220px 220px;
}

.anexo-folha {
    position: relative;
    z-index: 1;
    width: min(1120px, 92vw);
    margin: 0 auto;
    border: 1px solid var(--regua);
    padding: clamp(20px, 3vw, 34px);
}

.anexo-folha::before,
.anexo-folha::after {
    content: "";
    position: absolute;
    width: 13px;
    height: 13px;
    border: 1px solid var(--lacre);
    pointer-events: none;
}

.anexo-folha::before { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.anexo-folha::after  { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }

/* ---------- Timbre do anexo ---------- */

.anexo-timbre {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tinta-fraca);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--regua);
}

.anexo-timbre strong { color: var(--nanquim); font-weight: 400; }

.anexo-assunto {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--lacre);
    text-align: center;
    margin: clamp(14px, 2.4vw, 22px) 0 clamp(6px, 1vw, 10px);
}

.anexo-titulo {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-variation-settings: "SOFT" 60;
    font-weight: 400;
    font-size: clamp(2rem, 6vw, 4rem);
    line-height: 1.02;
    text-align: center;
    margin: 0 0 clamp(10px, 1.6vw, 16px);
}

.anexo-divisor {
    border: 0;
    border-top: 1px solid var(--regua);
    border-bottom: 1px solid var(--fio);
    height: 3px;
    margin: 0;
}

/* ---------- Corpo: capa · dados ---------- */

.anexo-corpo {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(22px, 4vw, 56px);
    padding: clamp(22px, 3.5vw, 40px) 0;
}

/* a capa, presa com fita como o retrato */
.anexo-capa {
    position: relative;
    margin: 0;
}

.anexo-capa-moldura {
    position: relative;
    border: 1px solid var(--regua);
    padding: 7px;
}

.anexo-capa img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.22,1,.36,1);
}

.anexo-capa-moldura::after {
    content: "";
    position: absolute;
    inset: 7px;
    pointer-events: none;
    opacity: .1;
    background-image: radial-gradient(rgba(16,19,21,.6) .6px, transparent .7px);
    background-size: 3px 3px;
    mix-blend-mode: multiply;
}

.anexo-fita {
    position: absolute;
    top: -11px;
    width: 62px;
    height: 22px;
    background: rgba(138, 155, 163, .34);
    border-left: 1px solid rgba(138, 155, 163, .5);
    border-right: 1px solid rgba(138, 155, 163, .5);
    z-index: 2;
    pointer-events: none;
    transition: transform .5s cubic-bezier(.34,1.4,.64,1);
}

.anexo-fita--esq { left: -16px; transform: rotate(-24deg); }
.anexo-fita--dir { right: -16px; transform: rotate(24deg); }

.anexo-capa:hover .anexo-fita--esq { transform: rotate(-34deg) translate(-3px, -3px); }
.anexo-capa:hover .anexo-fita--dir { transform: rotate(34deg) translate(3px, -3px); }
.anexo-capa:hover img { transform: scale(1.02); }

.anexo-capa figcaption {
    margin-top: 9px;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tinta-fraca);
    border-left: 2px solid var(--lacre);
    padding-left: 8px;
}

/* os dados da obra */
.anexo-dados {
    min-width: 0;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.anexo-dados dl { margin: 0 0 clamp(16px, 2.4vw, 24px); }

.anexo-dado {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 7px 0;
}

.anexo-dado dt { color: var(--tinta-fraca); white-space: nowrap; }

.anexo-dado .pontilhado {
    flex: 1 1 auto;
    height: 0;
    border-bottom: 1px dotted var(--fio);
    transform: translateY(-3px);
}

.anexo-dado dd {
    margin: 0;
    text-align: right;
    color: var(--nanquim);
}

.anexo-dado dd .lacre { color: var(--lacre); }

/* o trecho da obra, na voz serifada */
.anexo-sinopse {
    font-family: "Fraunces", Georgia, serif;
    font-size: clamp(13px, 1.5vw, 15.5px);
    line-height: 1.65;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(16, 19, 21, .84);
    margin: 0;
    padding-top: clamp(14px, 2vw, 20px);
    border-top: 1px solid var(--regua);
    text-align: justify;
    hyphens: auto;
}

.anexo-sinopse em { font-style: italic; }

.anexo-capitulos {
    display: block;
    margin-top: 10px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tinta-fraca);
}

/* ---------- Rodapé do anexo ---------- */

.anexo-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    padding-top: clamp(12px, 1.8vw, 18px);
    border-top: 4px double var(--regua);
}

.anexo-acao {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 12px 22px;
    background: var(--nanquim);
    color: var(--osso);
    transition: background .2s ease, color .2s ease, transform .2s cubic-bezier(.22,1,.36,1);
}

.anexo-acao:hover {
    background: var(--lacre);
    color: var(--osso);
    transform: translateY(-2px);
}

.anexo-nota {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tinta-fraca);
}

/* o carimbo da obra */
.anexo-carimbo {
    position: absolute;
    right: clamp(14px, 4vw, 60px);
    bottom: clamp(70px, 9vw, 110px);
    z-index: 3;
    transform: rotate(7deg);
    border: 2px solid var(--lacre);
    color: var(--lacre);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 6px 14px;
    opacity: .82;
    pointer-events: none;
}

.anexo-carimbo small {
    display: block;
    font-size: .78em;
    letter-spacing: .12em;
    opacity: .75;
    margin-top: 2px;
}

/* ---------- Responsivo ---------- */

@media (max-width: 860px) {
    .anexo-corpo {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 26px;
    }

    .anexo-capa { width: min(240px, 62vw); }
    .anexo-dados { width: 100%; font-size: 10px; }
    .anexo-dado dd { text-align: right; }
    .anexo-sinopse { text-align: left; }

    .anexo-carimbo {
        position: static;
        display: inline-block;
        transform: rotate(-3deg);
        margin: 0 0 12px;
    }

    .anexo-acoes { gap: 10px; }
    .anexo-acao { flex: 1 1 auto; text-align: center; padding: 11px 12px; }
    .anexo-nota { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .anexo-capa img,
    .anexo-fita,
    .anexo-acao { transition: none; }
}