/* Word of the Day — Split Zone (horizontal half).
 * No SVG bg image — the blue "tape" banner and cream "paper" block are
 * pure-CSS boxes whose edges are torn via an inline `feTurbulence` mask
 * (SVG noise applied to a white rectangle, displaced, used as alpha mask). */

.wotd-split-wrap {
    width: 88cqw;
    height: 84cqh;
    container-type: size;
    font-family: 'Geist Mono', 'Roboto Mono', monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #2a1f12;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
}

.wotd-split-paper {
    width: 90%;
    height: 80%;
    /* Shift down by half the banner's translateY(-40%) overhang
     * (40cqh × 40% = 16cqh, half = 8cqh) so the visual composition
     * — banner top to paper bottom — is centered in the wrap. */
    transform: translateY(8cqh);
    display: grid;
    grid-template-rows: 24% 56% 20%;
    grid-template-areas:
        "banner"
        "paper"
        "footer";
}

/* Banner — torn-paper shape (same polygon as the main box) but no stroke.
 * Filled with the theme's darkest shade so it reads as a dark label sitting
 * on top of the lighter paper. */
.wotd-split-banner-block {
    grid-area: banner;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 9cqh 0;
    overflow: hidden;
    box-sizing: border-box;
    /* Width narrower than full row so the torn edges are visible on the sides too. */
    width: 60%;
    justify-self: center;
    align-self: start;
    height: 40cqh;
    transform: translateY(-40%);
    background-color: var(--text);
    color: var(--bg);
    /* Soft drop shadow so the "tape" appears to lift off the paper. */
    filter: drop-shadow(0 0.6cqmin 1.6cqmin rgba(11, 18, 32, 0.30));
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 500' preserveAspectRatio='none'><path d='M 25,27 L 43,30 L 62,37 L 80,27 L 98,27 L 117,29 L 135,31 L 153,19 L 172,18 L 190,29 L 208,28 L 227,33 L 245,32 L 263,18 L 282,16 L 300,27 L 318,22 L 337,17 L 355,15 L 373,30 L 392,35 L 410,33 L 428,14 L 447,32 L 465,25 L 483,27 L 502,33 L 520,36 L 538,32 L 557,33 L 575,18 L 582,43 L 563,61 L 579,79 L 565,97 L 564,115 L 564,133 L 569,151 L 570,169 L 582,187 L 563,205 L 587,223 L 577,241 L 573,259 L 577,277 L 581,295 L 569,313 L 579,331 L 570,349 L 583,367 L 572,385 L 578,403 L 563,421 L 584,439 L 565,457 L 577,475 L 557,483 L 538,471 L 520,476 L 502,480 L 483,465 L 465,485 L 447,471 L 428,473 L 410,487 L 392,470 L 373,479 L 355,472 L 337,463 L 318,465 L 300,481 L 282,487 L 263,466 L 245,475 L 227,466 L 208,472 L 190,475 L 172,465 L 153,463 L 135,484 L 117,463 L 98,469 L 80,469 L 62,464 L 43,478 L 25,475 L 35,457 L 25,439 L 26,421 L 15,403 L 31,385 L 33,367 L 19,349 L 37,331 L 34,313 L 21,295 L 23,277 L 15,259 L 22,241 L 23,223 L 13,205 L 26,187 L 37,169 L 16,151 L 17,133 L 20,115 L 35,97 L 16,79 L 13,61 L 14,43 Z' fill='white' stroke='white' stroke-width='6' stroke-linejoin='round'/></svg>") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 500' preserveAspectRatio='none'><path d='M 25,27 L 43,30 L 62,37 L 80,27 L 98,27 L 117,29 L 135,31 L 153,19 L 172,18 L 190,29 L 208,28 L 227,33 L 245,32 L 263,18 L 282,16 L 300,27 L 318,22 L 337,17 L 355,15 L 373,30 L 392,35 L 410,33 L 428,14 L 447,32 L 465,25 L 483,27 L 502,33 L 520,36 L 538,32 L 557,33 L 575,18 L 582,43 L 563,61 L 579,79 L 565,97 L 564,115 L 564,133 L 569,151 L 570,169 L 582,187 L 563,205 L 587,223 L 577,241 L 573,259 L 577,277 L 581,295 L 569,313 L 579,331 L 570,349 L 583,367 L 572,385 L 578,403 L 563,421 L 584,439 L 565,457 L 577,475 L 557,483 L 538,471 L 520,476 L 502,480 L 483,465 L 465,485 L 447,471 L 428,473 L 410,487 L 392,470 L 373,479 L 355,472 L 337,463 L 318,465 L 300,481 L 282,487 L 263,466 L 245,475 L 227,466 L 208,472 L 190,475 L 172,465 L 153,463 L 135,484 L 117,463 L 98,469 L 80,469 L 62,464 L 43,478 L 25,475 L 35,457 L 25,439 L 26,421 L 15,403 L 31,385 L 33,367 L 19,349 L 37,331 L 34,313 L 21,295 L 23,277 L 15,259 L 22,241 L 23,223 L 13,205 L 26,187 L 37,169 L 16,151 L 17,133 L 20,115 L 35,97 L 16,79 L 13,61 L 14,43 Z' fill='white' stroke='white' stroke-width='6' stroke-linejoin='round'/></svg>") center / 100% 100% no-repeat;
}

/* Inner sizing-target — natural height so the binary-search fit
 * measures real content height. Children scale via em from this. */
.wotd-split-banner-fit {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    font-size: 7cqmin;
}

/* Paper — torn shape rendered as two layered ::before/::after pseudos,
 * each using the SAME polygon path as a CSS mask so we can color them
 * with theme variables (fill = lightest --bg, stroke = darkest --text).
 * No mask on the parent, otherwise the masked pseudos would be clipped
 * by the parent's mask and the text inside would also be clipped. */
.wotd-split-paper-block {
    grid-area: paper;
    grid-row: 1 / 4;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 26cqh 8cqw 14cqh;
    box-sizing: border-box;
    color: var(--text);
    background: transparent;
    /* fit-function changes this; children inherit */
    font-size: 2.4cqmin;
    line-height: 1.4;
}

/* Filled torn polygon — paints the paper background in the theme's lightest shade. */
.wotd-split-paper-block::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--bg);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800' preserveAspectRatio='none'><path d='M 30,28 L 48,22 L 67,30 L 86,38 L 104,19 L 122,20 L 141,35 L 160,21 L 178,29 L 196,36 L 215,19 L 234,34 L 252,24 L 270,19 L 289,20 L 308,31 L 326,31 L 344,20 L 363,25 L 382,20 L 400,35 L 418,31 L 437,19 L 456,36 L 474,21 L 492,25 L 511,38 L 530,38 L 548,36 L 566,19 L 585,36 L 604,36 L 622,30 L 640,19 L 659,25 L 678,19 L 696,35 L 714,22 L 733,27 L 752,31 L 770,22 L 775,48 L 761,67 L 776,86 L 767,104 L 775,122 L 779,141 L 763,160 L 761,178 L 776,196 L 776,215 L 778,234 L 764,252 L 769,270 L 761,289 L 775,308 L 780,326 L 760,344 L 776,363 L 759,382 L 777,400 L 764,418 L 773,437 L 779,456 L 775,474 L 771,492 L 782,511 L 768,530 L 772,548 L 776,566 L 772,585 L 769,604 L 767,622 L 765,640 L 763,659 L 780,678 L 782,696 L 765,714 L 760,733 L 776,752 L 767,770 L 752,774 L 733,773 L 714,768 L 696,781 L 678,772 L 659,767 L 640,777 L 622,760 L 604,761 L 585,774 L 566,771 L 548,763 L 530,782 L 511,768 L 492,762 L 474,773 L 456,771 L 437,759 L 418,779 L 400,760 L 382,782 L 363,775 L 344,776 L 326,768 L 308,768 L 289,780 L 270,769 L 252,777 L 234,773 L 215,776 L 196,772 L 178,760 L 160,760 L 141,766 L 122,773 L 104,780 L 86,779 L 67,760 L 48,759 L 30,781 L 40,752 L 27,733 L 38,714 L 36,696 L 39,678 L 32,659 L 27,640 L 40,622 L 30,604 L 39,585 L 29,566 L 18,548 L 32,530 L 29,511 L 23,492 L 37,474 L 21,456 L 33,437 L 19,418 L 24,400 L 42,382 L 27,363 L 22,344 L 41,326 L 25,308 L 30,289 L 30,270 L 33,252 L 20,234 L 23,215 L 32,196 L 30,178 L 35,160 L 26,141 L 22,122 L 31,104 L 35,86 L 26,67 L 40,48 Z' fill='white' stroke='white' stroke-width='8' stroke-linejoin='round'/></svg>") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800' preserveAspectRatio='none'><path d='M 30,28 L 48,22 L 67,30 L 86,38 L 104,19 L 122,20 L 141,35 L 160,21 L 178,29 L 196,36 L 215,19 L 234,34 L 252,24 L 270,19 L 289,20 L 308,31 L 326,31 L 344,20 L 363,25 L 382,20 L 400,35 L 418,31 L 437,19 L 456,36 L 474,21 L 492,25 L 511,38 L 530,38 L 548,36 L 566,19 L 585,36 L 604,36 L 622,30 L 640,19 L 659,25 L 678,19 L 696,35 L 714,22 L 733,27 L 752,31 L 770,22 L 775,48 L 761,67 L 776,86 L 767,104 L 775,122 L 779,141 L 763,160 L 761,178 L 776,196 L 776,215 L 778,234 L 764,252 L 769,270 L 761,289 L 775,308 L 780,326 L 760,344 L 776,363 L 759,382 L 777,400 L 764,418 L 773,437 L 779,456 L 775,474 L 771,492 L 782,511 L 768,530 L 772,548 L 776,566 L 772,585 L 769,604 L 767,622 L 765,640 L 763,659 L 780,678 L 782,696 L 765,714 L 760,733 L 776,752 L 767,770 L 752,774 L 733,773 L 714,768 L 696,781 L 678,772 L 659,767 L 640,777 L 622,760 L 604,761 L 585,774 L 566,771 L 548,763 L 530,782 L 511,768 L 492,762 L 474,773 L 456,771 L 437,759 L 418,779 L 400,760 L 382,782 L 363,775 L 344,776 L 326,768 L 308,768 L 289,780 L 270,769 L 252,777 L 234,773 L 215,776 L 196,772 L 178,760 L 160,760 L 141,766 L 122,773 L 104,780 L 86,779 L 67,760 L 48,759 L 30,781 L 40,752 L 27,733 L 38,714 L 36,696 L 39,678 L 32,659 L 27,640 L 40,622 L 30,604 L 39,585 L 29,566 L 18,548 L 32,530 L 29,511 L 23,492 L 37,474 L 21,456 L 33,437 L 19,418 L 24,400 L 42,382 L 27,363 L 22,344 L 41,326 L 25,308 L 30,289 L 30,270 L 33,252 L 20,234 L 23,215 L 32,196 L 30,178 L 35,160 L 26,141 L 22,122 L 31,104 L 35,86 L 26,67 L 40,48 Z' fill='white' stroke='white' stroke-width='8' stroke-linejoin='round'/></svg>") center / 100% 100% no-repeat;
    z-index: -1;
    pointer-events: none;
}

/* Stroke-only torn polygon — paints just the border ring in the theme's darkest shade. */
.wotd-split-paper-block::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--text);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800' preserveAspectRatio='none'><path d='M 30,28 L 48,22 L 67,30 L 86,38 L 104,19 L 122,20 L 141,35 L 160,21 L 178,29 L 196,36 L 215,19 L 234,34 L 252,24 L 270,19 L 289,20 L 308,31 L 326,31 L 344,20 L 363,25 L 382,20 L 400,35 L 418,31 L 437,19 L 456,36 L 474,21 L 492,25 L 511,38 L 530,38 L 548,36 L 566,19 L 585,36 L 604,36 L 622,30 L 640,19 L 659,25 L 678,19 L 696,35 L 714,22 L 733,27 L 752,31 L 770,22 L 775,48 L 761,67 L 776,86 L 767,104 L 775,122 L 779,141 L 763,160 L 761,178 L 776,196 L 776,215 L 778,234 L 764,252 L 769,270 L 761,289 L 775,308 L 780,326 L 760,344 L 776,363 L 759,382 L 777,400 L 764,418 L 773,437 L 779,456 L 775,474 L 771,492 L 782,511 L 768,530 L 772,548 L 776,566 L 772,585 L 769,604 L 767,622 L 765,640 L 763,659 L 780,678 L 782,696 L 765,714 L 760,733 L 776,752 L 767,770 L 752,774 L 733,773 L 714,768 L 696,781 L 678,772 L 659,767 L 640,777 L 622,760 L 604,761 L 585,774 L 566,771 L 548,763 L 530,782 L 511,768 L 492,762 L 474,773 L 456,771 L 437,759 L 418,779 L 400,760 L 382,782 L 363,775 L 344,776 L 326,768 L 308,768 L 289,780 L 270,769 L 252,777 L 234,773 L 215,776 L 196,772 L 178,760 L 160,760 L 141,766 L 122,773 L 104,780 L 86,779 L 67,760 L 48,759 L 30,781 L 40,752 L 27,733 L 38,714 L 36,696 L 39,678 L 32,659 L 27,640 L 40,622 L 30,604 L 39,585 L 29,566 L 18,548 L 32,530 L 29,511 L 23,492 L 37,474 L 21,456 L 33,437 L 19,418 L 24,400 L 42,382 L 27,363 L 22,344 L 41,326 L 25,308 L 30,289 L 30,270 L 33,252 L 20,234 L 23,215 L 32,196 L 30,178 L 35,160 L 26,141 L 22,122 L 31,104 L 35,86 L 26,67 L 40,48 Z' fill='none' stroke='white' stroke-width='8' stroke-linejoin='round'/></svg>") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800' preserveAspectRatio='none'><path d='M 30,28 L 48,22 L 67,30 L 86,38 L 104,19 L 122,20 L 141,35 L 160,21 L 178,29 L 196,36 L 215,19 L 234,34 L 252,24 L 270,19 L 289,20 L 308,31 L 326,31 L 344,20 L 363,25 L 382,20 L 400,35 L 418,31 L 437,19 L 456,36 L 474,21 L 492,25 L 511,38 L 530,38 L 548,36 L 566,19 L 585,36 L 604,36 L 622,30 L 640,19 L 659,25 L 678,19 L 696,35 L 714,22 L 733,27 L 752,31 L 770,22 L 775,48 L 761,67 L 776,86 L 767,104 L 775,122 L 779,141 L 763,160 L 761,178 L 776,196 L 776,215 L 778,234 L 764,252 L 769,270 L 761,289 L 775,308 L 780,326 L 760,344 L 776,363 L 759,382 L 777,400 L 764,418 L 773,437 L 779,456 L 775,474 L 771,492 L 782,511 L 768,530 L 772,548 L 776,566 L 772,585 L 769,604 L 767,622 L 765,640 L 763,659 L 780,678 L 782,696 L 765,714 L 760,733 L 776,752 L 767,770 L 752,774 L 733,773 L 714,768 L 696,781 L 678,772 L 659,767 L 640,777 L 622,760 L 604,761 L 585,774 L 566,771 L 548,763 L 530,782 L 511,768 L 492,762 L 474,773 L 456,771 L 437,759 L 418,779 L 400,760 L 382,782 L 363,775 L 344,776 L 326,768 L 308,768 L 289,780 L 270,769 L 252,777 L 234,773 L 215,776 L 196,772 L 178,760 L 160,760 L 141,766 L 122,773 L 104,780 L 86,779 L 67,760 L 48,759 L 30,781 L 40,752 L 27,733 L 38,714 L 36,696 L 39,678 L 32,659 L 27,640 L 40,622 L 30,604 L 39,585 L 29,566 L 18,548 L 32,530 L 29,511 L 23,492 L 37,474 L 21,456 L 33,437 L 19,418 L 24,400 L 42,382 L 27,363 L 22,344 L 41,326 L 25,308 L 30,289 L 30,270 L 33,252 L 20,234 L 23,215 L 32,196 L 30,178 L 35,160 L 26,141 L 22,122 L 31,104 L 35,86 L 26,67 L 40,48 Z' fill='none' stroke='white' stroke-width='8' stroke-linejoin='round'/></svg>") center / 100% 100% no-repeat;
    z-index: -1;
    pointer-events: none;
}

.wotd-split-footer-block {
    grid-area: footer;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 6cqw 2cqh;
}

.wotd-split-wrap .wotd-split-header {
    font-family: 'Geist Mono', 'Roboto Mono', monospace;
    font-size: 0.24em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: var(--bg);
    margin-bottom: 0.3em;
    line-height: 1;
    opacity: 0.85;
}

.wotd-split-wrap .wotd-split-word {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-size: 0.7em;
    font-weight: 700;
    line-height: 1;
    color: var(--bg);
    letter-spacing: -0.01em;
}

.wotd-split-wrap .wotd-split-pos {
    font-family: 'Georgia', serif;
    font-size: 0.31em;
    color: var(--bg);
    opacity: 0.85;
    margin-top: 0.3em;
    line-height: 1;
    font-style: italic;
}

.wotd-split-wrap .wotd-split-body {
    font-size: inherit;
    line-height: inherit;
}

.wotd-split-wrap .wotd-split-senses {
    margin: 0;
    padding-inline-start: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    font-size: inherit;
    line-height: inherit;
}

.wotd-split-wrap .wotd-split-sense {
    font-family: 'Georgia', serif;
    font-size: inherit;
    line-height: inherit;
    color: var(--text);
}

.wotd-split-wrap .wotd-split-example {
    font-family: 'Georgia', serif;
    font-size: 0.85em;
    line-height: 1.35;
    margin-top: 0.8em;
    color: var(--text);
    opacity: 0.78;
    text-align: start;
}