/* Word of the Day — Sidebar Zone (narrow vertical / triple-h column).
 * 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-sidebar-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-sidebar-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-sidebar-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 10cqw;
    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 400 500' preserveAspectRatio='none'><path d='M 25,21 L 41,22 L 57,34 L 73,34 L 89,18 L 105,33 L 120,20 L 136,34 L 152,17 L 168,20 L 184,33 L 200,36 L 216,18 L 232,17 L 248,15 L 264,30 L 280,19 L 295,36 L 311,22 L 327,13 L 343,26 L 359,17 L 375,34 L 382,41 L 363,57 L 371,73 L 367,89 L 365,105 L 371,121 L 377,138 L 386,154 L 376,170 L 367,186 L 371,202 L 374,218 L 370,234 L 378,250 L 387,266 L 380,282 L 381,298 L 376,314 L 384,330 L 374,346 L 376,362 L 383,379 L 373,395 L 383,411 L 366,427 L 374,443 L 382,459 L 383,475 L 359,471 L 343,485 L 327,477 L 311,480 L 295,482 L 280,486 L 264,467 L 248,477 L 232,484 L 216,486 L 200,477 L 184,480 L 168,468 L 152,472 L 136,469 L 120,468 L 105,479 L 89,474 L 73,471 L 57,474 L 41,477 L 25,471 L 32,459 L 21,443 L 25,427 L 17,411 L 31,395 L 28,379 L 30,362 L 20,346 L 31,330 L 20,314 L 19,298 L 35,282 L 24,266 L 17,250 L 15,234 L 26,218 L 33,202 L 33,186 L 27,170 L 25,154 L 13,138 L 36,121 L 26,105 L 14,89 L 20,73 L 17,57 L 28,41 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 400 500' preserveAspectRatio='none'><path d='M 25,21 L 41,22 L 57,34 L 73,34 L 89,18 L 105,33 L 120,20 L 136,34 L 152,17 L 168,20 L 184,33 L 200,36 L 216,18 L 232,17 L 248,15 L 264,30 L 280,19 L 295,36 L 311,22 L 327,13 L 343,26 L 359,17 L 375,34 L 382,41 L 363,57 L 371,73 L 367,89 L 365,105 L 371,121 L 377,138 L 386,154 L 376,170 L 367,186 L 371,202 L 374,218 L 370,234 L 378,250 L 387,266 L 380,282 L 381,298 L 376,314 L 384,330 L 374,346 L 376,362 L 383,379 L 373,395 L 383,411 L 366,427 L 374,443 L 382,459 L 383,475 L 359,471 L 343,485 L 327,477 L 311,480 L 295,482 L 280,486 L 264,467 L 248,477 L 232,484 L 216,486 L 200,477 L 184,480 L 168,468 L 152,472 L 136,469 L 120,468 L 105,479 L 89,474 L 73,471 L 57,474 L 41,477 L 25,471 L 32,459 L 21,443 L 25,427 L 17,411 L 31,395 L 28,379 L 30,362 L 20,346 L 31,330 L 20,314 L 19,298 L 35,282 L 24,266 L 17,250 L 15,234 L 26,218 L 33,202 L 33,186 L 27,170 L 25,154 L 13,138 L 36,121 L 26,105 L 14,89 L 20,73 L 17,57 L 28,41 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-sidebar-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-sidebar-paper-block {
    grid-area: paper;
    grid-row: 1 / 4;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28cqh 13cqw 12cqh;
    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-sidebar-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 400 600' preserveAspectRatio='none'><path d='M 25,27 L 41,32 L 57,24 L 73,21 L 89,17 L 105,18 L 120,34 L 136,13 L 152,23 L 168,29 L 184,27 L 200,32 L 216,15 L 232,23 L 248,30 L 264,32 L 280,35 L 295,14 L 311,36 L 327,25 L 343,18 L 359,35 L 375,27 L 386,42 L 376,59 L 368,77 L 368,94 L 370,111 L 364,128 L 366,145 L 367,162 L 379,180 L 381,197 L 365,214 L 387,231 L 385,248 L 375,266 L 386,283 L 366,300 L 372,317 L 369,334 L 384,352 L 370,369 L 386,386 L 376,403 L 365,420 L 387,438 L 371,455 L 369,472 L 375,489 L 371,506 L 373,523 L 364,541 L 369,558 L 385,575 L 359,563 L 343,576 L 327,564 L 311,575 L 295,578 L 280,567 L 264,563 L 248,570 L 232,576 L 216,586 L 200,566 L 184,582 L 168,563 L 152,566 L 136,587 L 120,581 L 105,569 L 89,569 L 73,573 L 57,563 L 41,565 L 25,567 L 30,558 L 13,541 L 29,523 L 15,506 L 31,489 L 28,472 L 30,455 L 19,438 L 26,420 L 15,403 L 25,386 L 19,369 L 33,352 L 37,334 L 15,317 L 35,300 L 31,283 L 17,266 L 18,248 L 32,231 L 36,214 L 14,197 L 14,180 L 21,162 L 30,145 L 34,128 L 32,111 L 17,94 L 36,77 L 21,59 L 36,42 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 400 600' preserveAspectRatio='none'><path d='M 25,27 L 41,32 L 57,24 L 73,21 L 89,17 L 105,18 L 120,34 L 136,13 L 152,23 L 168,29 L 184,27 L 200,32 L 216,15 L 232,23 L 248,30 L 264,32 L 280,35 L 295,14 L 311,36 L 327,25 L 343,18 L 359,35 L 375,27 L 386,42 L 376,59 L 368,77 L 368,94 L 370,111 L 364,128 L 366,145 L 367,162 L 379,180 L 381,197 L 365,214 L 387,231 L 385,248 L 375,266 L 386,283 L 366,300 L 372,317 L 369,334 L 384,352 L 370,369 L 386,386 L 376,403 L 365,420 L 387,438 L 371,455 L 369,472 L 375,489 L 371,506 L 373,523 L 364,541 L 369,558 L 385,575 L 359,563 L 343,576 L 327,564 L 311,575 L 295,578 L 280,567 L 264,563 L 248,570 L 232,576 L 216,586 L 200,566 L 184,582 L 168,563 L 152,566 L 136,587 L 120,581 L 105,569 L 89,569 L 73,573 L 57,563 L 41,565 L 25,567 L 30,558 L 13,541 L 29,523 L 15,506 L 31,489 L 28,472 L 30,455 L 19,438 L 26,420 L 15,403 L 25,386 L 19,369 L 33,352 L 37,334 L 15,317 L 35,300 L 31,283 L 17,266 L 18,248 L 32,231 L 36,214 L 14,197 L 14,180 L 21,162 L 30,145 L 34,128 L 32,111 L 17,94 L 36,77 L 21,59 L 36,42 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-sidebar-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 400 600' preserveAspectRatio='none'><path d='M 25,27 L 41,32 L 57,24 L 73,21 L 89,17 L 105,18 L 120,34 L 136,13 L 152,23 L 168,29 L 184,27 L 200,32 L 216,15 L 232,23 L 248,30 L 264,32 L 280,35 L 295,14 L 311,36 L 327,25 L 343,18 L 359,35 L 375,27 L 386,42 L 376,59 L 368,77 L 368,94 L 370,111 L 364,128 L 366,145 L 367,162 L 379,180 L 381,197 L 365,214 L 387,231 L 385,248 L 375,266 L 386,283 L 366,300 L 372,317 L 369,334 L 384,352 L 370,369 L 386,386 L 376,403 L 365,420 L 387,438 L 371,455 L 369,472 L 375,489 L 371,506 L 373,523 L 364,541 L 369,558 L 385,575 L 359,563 L 343,576 L 327,564 L 311,575 L 295,578 L 280,567 L 264,563 L 248,570 L 232,576 L 216,586 L 200,566 L 184,582 L 168,563 L 152,566 L 136,587 L 120,581 L 105,569 L 89,569 L 73,573 L 57,563 L 41,565 L 25,567 L 30,558 L 13,541 L 29,523 L 15,506 L 31,489 L 28,472 L 30,455 L 19,438 L 26,420 L 15,403 L 25,386 L 19,369 L 33,352 L 37,334 L 15,317 L 35,300 L 31,283 L 17,266 L 18,248 L 32,231 L 36,214 L 14,197 L 14,180 L 21,162 L 30,145 L 34,128 L 32,111 L 17,94 L 36,77 L 21,59 L 36,42 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 400 600' preserveAspectRatio='none'><path d='M 25,27 L 41,32 L 57,24 L 73,21 L 89,17 L 105,18 L 120,34 L 136,13 L 152,23 L 168,29 L 184,27 L 200,32 L 216,15 L 232,23 L 248,30 L 264,32 L 280,35 L 295,14 L 311,36 L 327,25 L 343,18 L 359,35 L 375,27 L 386,42 L 376,59 L 368,77 L 368,94 L 370,111 L 364,128 L 366,145 L 367,162 L 379,180 L 381,197 L 365,214 L 387,231 L 385,248 L 375,266 L 386,283 L 366,300 L 372,317 L 369,334 L 384,352 L 370,369 L 386,386 L 376,403 L 365,420 L 387,438 L 371,455 L 369,472 L 375,489 L 371,506 L 373,523 L 364,541 L 369,558 L 385,575 L 359,563 L 343,576 L 327,564 L 311,575 L 295,578 L 280,567 L 264,563 L 248,570 L 232,576 L 216,586 L 200,566 L 184,582 L 168,563 L 152,566 L 136,587 L 120,581 L 105,569 L 89,569 L 73,573 L 57,563 L 41,565 L 25,567 L 30,558 L 13,541 L 29,523 L 15,506 L 31,489 L 28,472 L 30,455 L 19,438 L 26,420 L 15,403 L 25,386 L 19,369 L 33,352 L 37,334 L 15,317 L 35,300 L 31,283 L 17,266 L 18,248 L 32,231 L 36,214 L 14,197 L 14,180 L 21,162 L 30,145 L 34,128 L 32,111 L 17,94 L 36,77 L 21,59 L 36,42 Z' fill='none' stroke='white' stroke-width='8' stroke-linejoin='round'/></svg>") center / 100% 100% no-repeat;
    z-index: -1;
    pointer-events: none;
}

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

.wotd-sidebar-wrap .wotd-sidebar-header {
    font-family: 'Geist Mono', 'Roboto Mono', monospace;
    /* em-based so the header auto-resizes via the JS fit on
     * .wotd-sidebar-banner-fit; nowrap keeps it on one line so the
     * fit shrinks the font when needed. Kept small so it doesn't
     * dominate the fit (Catalyst can then take more space). */
    font-size: 0.3em;
    letter-spacing: 0.2em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--bg);
    margin-bottom: 0.3em;
    line-height: 1;
    opacity: 0.85;
    text-align: center;
    white-space: nowrap;
}

.wotd-sidebar-wrap .wotd-sidebar-header-line {
    display: block;
}

.wotd-sidebar-wrap .wotd-sidebar-word {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    /* em-based so the word auto-resizes via the JS fit on the parent
     * .wotd-sidebar-banner-fit (all three header lines scale together). */
    font-size: 1em;
    font-weight: 700;
    line-height: 1;
    color: var(--bg);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

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

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

.wotd-sidebar-wrap .wotd-sidebar-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-sidebar-wrap .wotd-sidebar-sense {
    font-family: 'Georgia', serif;
    font-size: inherit;
    line-height: inherit;
    color: var(--text);
}

.wotd-sidebar-wrap .wotd-sidebar-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;
}