/* S10 — O seu espaço. A sua história. MOBILE-FIRST (ADR-023): a base é o celular; o desktop só acrescenta, a partir de 900 px de contêiner.
   Arte-mãe (faixa de 682 px): texto 8,9–41% | retrato 45,3–69,1% com o neon cruzando até a borda | lista 87–94%. Cena ESCURA, a última antes da S11
   (rodapé imutável). Contêiner NOMEADO (d10): todo @container consulta por nome (lição 64). O retrato é o arquivo aprovado em preto e branco POR CSS
   (o arquivo não muda) e o neon é SVG ATRÁS da figura (máscara com o contorno), revelado por clip-path e com respiração lenta como os arcos da S03 (animação aprovada pelo Owner em 02/11/2026). Sem JS ou com prefers-reduced-motion a cena aparece estática e completa. */
.d10{--acc:#e72b6c;--acc-fill:#d02761;--ink:#fff;position:relative;z-index:1;overflow:hidden;background:#050407;color:var(--ink);font-family:var(--font-body,"Helvetica Neue",Helvetica,Arial,sans-serif);container:d10/inline-size}
.d10-in{box-sizing:border-box;position:relative;z-index:1;max-width:1320px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(22px,5cqw,40px);padding:clamp(36px,8cqw,84px) clamp(16px,3.87cqw,48px)}
.d10 .d10-copy h2{color:var(--ink)}   /* especificidade (0,2,1): vence [data-bx-mode] h2 do tema (0,1,1), que vem depois na folha; só a COR (lição 49) */
.d10-copy h2{margin:0 0 clamp(10px,1.4cqw,18px);font-family:var(--font-title,inherit);font-size:clamp(26px,8.2cqw,44px);line-height:1.08;letter-spacing:-.01em}
.d10-copy h2 span{display:block}
.d10-h-l{font-weight:300}
.d10-h-b{font-weight:800}
.d10 .d10-copy h2 .d10-h-b{color:#ff4f8b}   /* rosa claro sobre o preto: 6,5:1 (o #e72b6c dá 4,6:1 e fica no limite para o título grande) */
.d10-copy p{margin:0 0 clamp(18px,2.6cqw,28px);max-width:40ch;font-size:clamp(14px,1.45cqw,18px);line-height:1.5;color:rgba(255,255,255,.86)}
.d10-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(18px,2.4cqw,28px)}
.d10-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 clamp(22px,3cqw,34px);border-radius:999px;background:var(--acc-fill);border:1.5px solid var(--acc-fill);color:#fff;text-decoration:none;font-size:15px;font-weight:600;transition:background .2s,border-color .2s}   /* branco sobre #d02761 = 5,07:1 (lição 67) */
.d10-btn:hover,.d10-btn:focus-visible{background:#b81f52;border-color:#b81f52}
.d10-btn:focus-visible,.d10-link:focus-visible{outline:2px solid #fff;outline-offset:3px}
.d10-link{box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;min-height:48px;color:#fff;text-decoration:none;font-size:15px;font-weight:500}
.d10-link svg{width:18px;height:18px;fill:none;stroke:#ff7fae;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.d10-link:hover svg,.d10-link:focus-visible svg{transform:translateX(3px)}

/* retrato: preto e branco por CSS, fundo preto; o neon passa POR TRÁS da figura */
.d10-ph{position:relative;margin:0;min-width:0;aspect-ratio:4/5;overflow:hidden;border-radius:clamp(10px,1.6cqw,18px);background:#000}
.d10-ph img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 14%;filter:grayscale(1) contrast(1.06) brightness(.94)}
.d10-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,4,7,.55),transparent 34%,transparent 70%,rgba(5,4,7,.6)),linear-gradient(0deg,rgba(5,4,7,.5),transparent 28%);pointer-events:none}
.d10-neon{position:absolute;inset:0;pointer-events:none;--sil-y:14%;
  /* ATRÁS da personagem: a máscara é o contorno da figura invertido (opaco fora, transparente sobre ela), com o mesmo cover e a mesma posição da foto. A foto não é tocada. */
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 928 1152' width='928' height='1152'%3E%3Cpath fill-rule='evenodd' d='M0 0H928V1152H0ZM482 144L490 144 500 145 510 147 520 150 532 154 543 160 554 168 566 178 578 190 588 201 595 210 600 218 604 226 606 235 609 248 611 263 613 281 615 295 617 306 619 312 621 316 622 326 623 346 622 372 622 408 622 435 622 455 624 468 628 472 630 484 633 502 635 526 637 558 648 584 667 607 696 625 732 639 761 650 780 659 791 664 793 668 794 671 796 675 796 680 796 684 797 690 798 695 800 701 804 707 806 714 807 721 808 730 808 738 808 746 810 752 811 756 813 760 815 768 817 781 819 800 821 824 823 843 826 858 828 868 832 872 834 882 835 895 836 913 836 935 836 953 838 968 839 978 841 986 844 992 847 996 852 1000 856 1004 860 1010 864 1018 866 1030 866 1046 866 1057 866 1064 864 1068 860 1068 858 1073 857 1084 856 1100 856 1120 855 1136 852 1164 848 1164 844 1164 840 1164 837 1144 836 1136 836 1124 834 1116 831 1111 826 1108 818 1108 812 1108 808 1106 804 1105 800 1103 792 1102 777 1100 757 1100 731 1100 712 1100 698 1102 692 1103 692 1105 690 1106 687 1108 682 1108 674 1108 669 1111 666 1116 664 1124 664 1136 627 1144 552 1164 440 1164 292 1164 180 1164 105 1142 68 1132 68 1120 67 1109 66 1100 64 1094 60 1090 58 1084 57 1075 56 1064 56 1052 57 1041 58 1033 60 1028 64 1024 66 1016 68 1004 70 986 70 962 72 944 75 929 78 919 82 913 85 904 88 891 90 876 90 856 92 841 96 829 100 820 104 816 108 810 111 802 112 794 112 786 112 778 114 772 115 768 117 764 118 761 120 757 120 752 120 748 122 738 125 723 130 704 138 680 144 661 148 647 152 638 156 634 158 630 160 624 162 619 162 613 164 608 166 603 168 600 172 596 180 594 195 590 215 588 241 584 261 582 276 579 284 577 288 575 293 573 301 571 312 569 324 567 335 565 342 563 347 561 349 559 350 552 352 541 352 524 352 504 352 485 350 469 349 456 347 444 345 436 343 430 341 426 339 426 338 416 336 397 336 370 336 334 336 304 338 281 339 264 341 252 344 242 347 231 352 221 356 211 361 204 364 198 367 196 369 196 372 195 375 192 380 188 384 184 388 179 391 176 392 173 392 171 394 169 397 167 402 165 410 163 415 161 419 159 422 157 422 155 426 153 432 151 440 149 452 147 462 146 472 144Z'/%3E%3C/svg%3E") 50% var(--sil-y)/cover no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 928 1152' width='928' height='1152'%3E%3Cpath fill-rule='evenodd' d='M0 0H928V1152H0ZM482 144L490 144 500 145 510 147 520 150 532 154 543 160 554 168 566 178 578 190 588 201 595 210 600 218 604 226 606 235 609 248 611 263 613 281 615 295 617 306 619 312 621 316 622 326 623 346 622 372 622 408 622 435 622 455 624 468 628 472 630 484 633 502 635 526 637 558 648 584 667 607 696 625 732 639 761 650 780 659 791 664 793 668 794 671 796 675 796 680 796 684 797 690 798 695 800 701 804 707 806 714 807 721 808 730 808 738 808 746 810 752 811 756 813 760 815 768 817 781 819 800 821 824 823 843 826 858 828 868 832 872 834 882 835 895 836 913 836 935 836 953 838 968 839 978 841 986 844 992 847 996 852 1000 856 1004 860 1010 864 1018 866 1030 866 1046 866 1057 866 1064 864 1068 860 1068 858 1073 857 1084 856 1100 856 1120 855 1136 852 1164 848 1164 844 1164 840 1164 837 1144 836 1136 836 1124 834 1116 831 1111 826 1108 818 1108 812 1108 808 1106 804 1105 800 1103 792 1102 777 1100 757 1100 731 1100 712 1100 698 1102 692 1103 692 1105 690 1106 687 1108 682 1108 674 1108 669 1111 666 1116 664 1124 664 1136 627 1144 552 1164 440 1164 292 1164 180 1164 105 1142 68 1132 68 1120 67 1109 66 1100 64 1094 60 1090 58 1084 57 1075 56 1064 56 1052 57 1041 58 1033 60 1028 64 1024 66 1016 68 1004 70 986 70 962 72 944 75 929 78 919 82 913 85 904 88 891 90 876 90 856 92 841 96 829 100 820 104 816 108 810 111 802 112 794 112 786 112 778 114 772 115 768 117 764 118 761 120 757 120 752 120 748 122 738 125 723 130 704 138 680 144 661 148 647 152 638 156 634 158 630 160 624 162 619 162 613 164 608 166 603 168 600 172 596 180 594 195 590 215 588 241 584 261 582 276 579 284 577 288 575 293 573 301 571 312 569 324 567 335 565 342 563 347 561 349 559 350 552 352 541 352 524 352 504 352 485 350 469 349 456 347 444 345 436 343 430 341 426 339 426 338 416 336 397 336 370 336 334 336 304 338 281 339 264 341 252 344 242 347 231 352 221 356 211 361 204 364 198 367 196 369 196 372 195 375 192 380 188 384 184 388 179 391 176 392 173 392 171 394 169 397 167 402 165 410 163 415 161 419 159 422 157 422 155 426 153 432 151 440 149 452 147 462 146 472 144Z'/%3E%3C/svg%3E") 50% var(--sil-y)/cover no-repeat}
.d10-arc{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.d10-arc.is-live{will-change:opacity}   /* camada própria só enquanto respira: sem isso o drop-shadow é refeito a cada quadro (medido: 68% de CPU contra 1,7%) */
.d10-arc path{fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px rgba(231,43,108,.75)) drop-shadow(0 0 14px rgba(231,43,108,.35))}   /* mesmo traço, cor e brilho dos arcos da S03 */
.d10-arc--b path{stroke-width:1.6;opacity:.85}
.d10-words{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px clamp(14px,3cqw,24px)}
.d10-words li{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff}   /* 12 px: sobre o preto 21:1; sobre o retrato (desktop) o véu abaixo garante >= 10:1 medido no pixel */

/* >=600 px: o retrato deixa de ocupar a largura toda */
@container d10 (min-width:600px){
  .d10-ph{width:100%;max-width:min(100%,460px);justify-self:center}
}
/* >=900 px: como a arte-mãe. O texto ocupa a coluna 1 (a partir de 8,9%); o retrato ocupa as colunas 2 e 3 e SANGRA de cima a baixo e até a borda direita
   (margens negativas só em cima, embaixo e à direita); a lista fica sobre o retrato, na mesma célula, alinhada à direita. */
@container d10 (min-width:900px){
  .d10-in{max-width:none;grid-template-columns:minmax(0,36.4fr) minmax(0,54.7fr);column-gap:0;align-items:center;padding-block:clamp(26px,3.4cqw,52px);padding-left:8.9cqw;padding-right:0}
  .d10-copy{grid-column:1;grid-row:1}
  .d10-ph{grid-column:2;grid-row:1;max-width:none;justify-self:stretch;aspect-ratio:auto;align-self:stretch;min-height:clamp(240px,24cqw,360px);border-radius:0;margin-block:calc(-1 * clamp(26px,3.4cqw,52px))}
  .d10-words{grid-column:2;grid-row:1;position:relative;z-index:2;flex-direction:column;align-items:flex-end;gap:clamp(8px,1.4cqw,16px);justify-self:end;margin-right:5.2cqw;padding:clamp(10px,1.4cqw,18px) clamp(12px,1.6cqw,22px) clamp(10px,1.4cqw,18px) clamp(34px,5cqw,72px);background:linear-gradient(90deg,transparent,rgba(5,4,7,.55) 48%)}   /* véu local: o cabelo e o brilho do neon passam atrás da lista (3,65:1 sem véu, 10:1 com) */
  .d10-ph img{object-position:50% 22%}
  .d10-neon{--sil-y:22%}   /* a mesma posição da foto, para o recorte acompanhar o retrato */   /* janela larga e baixa: do cabelo ao queixo (14% cortava o queixo) */
  .d10-copy h2{font-size:clamp(20px,2.4cqw,36px)}
  .d10-copy h2 span{white-space:nowrap}
}