/* C2: physical surfaces around the accepted C1 layout, not a replacement layout. */
:root {
    --rif-mount: #dedacf;
    --rif-print-line: #b4b0a4;
    --rif-tear: polygon(.4% .6%, 13% .3%, 13.4% 1.1%, 14% .5%, 43% 0,
        62% .6%, 63% 1.1%, 64% .4%, 87% .3%, 99.6% .8%, 99.8% 20%,
        99.2% 22%, 99.8% 24%, 99.5% 64%, 100% 76%, 99.6% 77%, 100% 99%,
        88% 99.2%, 87% 98.6%, 85% 99.3%, 60% 100%, 58% 99.4%, 45% 99.8%,
        44% 99.2%, 42% 99.9%, 13% 99.3%, 12% 98.6%, 10% 99.5%, 0 99.7%,
        .2% 89%, .7% 88%, .3% 87%, 0 58%, .6% 56%, .2% 54%, .6% 25%,
        0 24%, .4% 22%);
}

/* Decorative edges never clip text, focus indicators, or editor controls. */
.hero-shell::before,
.hero-shell::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 9px;
    background: url(images/ink-edge.svg) repeat-x left top / 1200px 9px;
    pointer-events: none;
}
.hero-shell::before { top: -1px; transform: rotate(180deg); }
.hero-shell::after { bottom: -1px; }
.hero-copy { background: none; clip-path: none; isolation: isolate; }
.hero-copy::before {
    content: "";
    position: absolute;
    inset: -3px -5px -3px -4px;
    z-index: -1;
    background: var(--rif-paper) url(images/paper.svg);
    clip-path: var(--rif-tear);
    transform: rotate(-.35deg);
    pointer-events: none;
}
.hero-media {
    padding: 0;
    border: 1px solid #7b7f7680;
    background: #101311;
    overflow: visible;
    isolation: isolate;
}
.hero-media::before {
    content: "";
    position: absolute;
    inset: -4px -5px -5px -4px;
    border: 0;
    background: var(--rif-dark) url(images/paper.svg);
    transform: rotate(.25deg);
    clip-path: var(--rif-tear);
    z-index: -1;
    pointer-events: none;
}
.hero-image { border: 0; background: #101311; }
.hero-image img { filter: brightness(.92) contrast(1.035); }
.play-button .wp-block-button__link { background: #1013119c; }
.hero-media .media-stamp { right: 13px; bottom: 12px; }
@media (min-width: 1200px) {
    .hero-media .handnote {
        top: 20px;
        right: -18px;
        padding: 10px 12px;
        color: var(--rif-ink);
        background: var(--rif-paper) url(images/paper.svg);
        box-shadow: -2px 3px 0 #0003;
        font-size: 14px;
        line-height: 1.3;
        transform: rotate(5deg);
        clip-path: polygon(2% 0, 100% 2%, 98% 96%, 3% 100%, 0 54%);
        pointer-events: none;
    }
}

/* Watch cards keep their geometry; only the boxed UI frame is reduced. */
.battle-card { border: 0; background: transparent; }
.card-caption { border-bottom: 1px solid var(--rif-line); padding-bottom: 12px; }

/* A fixed mount contains the complete source, including nonstandard ratios. */
.event-card figure {
    aspect-ratio: 26 / 37;
    padding: 3px;
    background: var(--rif-mount);
    box-shadow: 0 1px 2px #14161522;
}
.event-card figure > a { display: block; width: 100%; height: 100%; }
.event-card img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: contain;
    filter: none;
}
#events-in-order .section-heading { position: relative; }
#events-in-order .section-heading::before {
    content: "";
    position: absolute;
    top: -14px;
    left: -14px;
    width: 13px;
    height: 13px;
    background: linear-gradient(var(--rif-muted), var(--rif-muted)) center / 1px 13px no-repeat,
        linear-gradient(var(--rif-muted), var(--rif-muted)) center / 13px 1px no-repeat;
    opacity: .55;
    pointer-events: none;
}

/* Colour/tonality are presentation only; original files are never rewritten. */
.battler-card img { filter: grayscale(.85) contrast(1.035); }
.battler-card figure { background: var(--rif-dark); }
.wp-block-image.is-style-rif-original img {
    filter: none;
    object-fit: contain;
}

/* Optional core Group styles. Type follows the card when it is reordered. */
.editorial-card figure { position: relative; isolation: isolate; }
.editorial-card.is-style-rif-gallery figure {
    transform: rotate(-1deg);
    border: 3px solid var(--rif-paper);
    box-shadow: 0 1px 2px #14161533;
}
.editorial-card.is-style-rif-gallery figure::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--rif-mount);
    border: 1px solid var(--rif-print-line);
    transform: translate(4px, 3px) rotate(2deg);
    pointer-events: none;
}
.editorial-card.is-style-rif-article figure {
    padding: 8px 8px 13px;
    background: #f8f6ed;
    border-bottom: 1px solid var(--rif-print-line);
    transform: translateY(3px) rotate(.65deg);
}
.editorial-card.is-style-rif-contact figure {
    padding: 3px;
    background: var(--rif-ink);
    border: 1px solid var(--rif-print-line);
}
.editorial-card.is-style-rif-article .card-kicker { margin-top: 10px !important; }

/* Keep the accepted magenta panel; refine only its paper silhouette. */
.contribution { background: none; clip-path: none; isolation: isolate; }
.contribution::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--rif-pink) url(images/paper.svg);
    clip-path: var(--rif-tear);
    transform: rotate(-.6deg);
    pointer-events: none;
}

@media (max-width: 600px) {
    .site-header { padding-top: 14px; padding-bottom: 10px; gap: 11px; }
    .site-header .wordmark { font-size: 37px; }
    .header-search .wp-block-search__inside-wrapper { min-height: 44px; }
    .hero-media { padding: 3px; }
    .hero-media::before { inset: -2px; transform: rotate(.15deg); }
    .hero-copy::before { inset: -1px -2px -2px; transform: none; }
    .hero-media .media-stamp { right: 8px; bottom: 7px; }
    .event-card figure { padding: 2px; }
    .editorial-card.is-style-rif-article figure { padding: 5px 5px 9px; }
    .contribution::before { transform: rotate(-.35deg); }
}

/* Flat editing surfaces preserve hit targets and C1's easy media replacement. */
.editor-styles-wrapper .hero-copy { background: var(--rif-paper) url(images/paper.svg); }
.editor-styles-wrapper .contribution { background: var(--rif-pink) url(images/paper.svg); }
.editor-styles-wrapper .hero-copy::before,
.editor-styles-wrapper .contribution::before,
.editor-styles-wrapper .hero-media::before { display: none; }
.editor-styles-wrapper .editorial-card figure { transform: none; }