@font-face {
    font-family: "EE Comic";
    src: url("../fonts/Anton-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "EE Stamp";
    src: url("../fonts/eveleth-clean-regular.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

/* A worn horror comic, using the original artwork and the shared folio texture. */
.ee-page {
    --dngn-bg: #0a090b;
    --dngn-text: #f2e8d8;
    --dngn-muted: #c3b6ad;
    --dngn-orange: #b92a38;
    --dngn-cyan: #f18c87;
    --dngn-rule: #61403f;
    --ee-paper: #efe3cf;
    --ee-red: #a61d2c;
    --ee-cut: polygon(0 5%, 12% 1%, 23% 4%, 36% 0, 48% 3%, 62% 1%, 76% 4%, 90% 0, 100% 3%, 99% 94%, 86% 99%, 72% 96%, 57% 100%, 43% 96%, 29% 99%, 14% 95%, 1% 99%);
    --ee-blood-paper: linear-gradient(#a61d2ced, #7e1221ed), url("../images/making-custom-adversaries/bg.webp");
    padding: 0;
    background-color: var(--dngn-bg);
    background-image: linear-gradient(#030204c9, #030204ed, 45%, #030204f5), url("../images/making-custom-adversaries/bgblack.jpg");
    background-position: center top;
    background-size: auto, max(1400px, 100%) auto;
    font-size: 1.0625rem;
}
.ee-page .dngn-container { inline-size: min(1160px, calc(100% - 80px)); }
.ee-page :where(h2, h3) { font-family: "EE Comic", Impact, sans-serif; font-weight: 400; }
.ee-page h2 { font-size: clamp(2rem, 1.25rem + 2.2vw, 3.25rem); line-height: 1.2; letter-spacing: .015em; text-transform: uppercase; }
.ee-cutout { display: inline-block; padding: .2em .32em .3em; background-image: var(--ee-blood-paper); background-size: auto, 600px auto; color: #fff0df; clip-path: var(--ee-cut); transform: rotate(-1.5deg); text-shadow: 2px 3px 0 #350810; }
.ee-horror-line { display: block; margin-block-start: 14px; color: var(--ee-paper); text-shadow: -2px 1px 0 #9a1a29, 3px 3px 0 #000; }
.ee-hero { padding-block-start: 22px; border-block-start: 4px solid var(--ee-red); }
.ee-page .dngn-toolbar { padding-block-end: 14px; border-block-end: 1px solid #61403f70; }
.ee-festival-link { display: block; flex: 0 0 auto; padding: 6px 0; }
.ee-festival-link img { display: block; inline-size: 108px; block-size: auto; }
.ee-festival-link:hover { opacity: .8; }
.ee-page .ee-overview { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(42px, 5vw, 72px); padding-block: 48px 76px; min-block-size: 770px; }
.ee-book-display { padding: 24px; }
.ee-cover { position: relative; inline-size: min(470px, 100%) !important; margin-inline: auto; border: 2px solid #e5d3bc; transform: rotate(-3deg); box-shadow: 7px 8px 0 #8b1925, 13px 15px 0 #090709, 0 22px 40px #000b; }
.ee-cover:hover { outline: 2px solid var(--dngn-cyan); outline-offset: 5px; }
.ee-page .ee-cover img { block-size: auto; background: #050505; }
.ee-page .dngn-cover-thumbnails { margin-block-start: 40px; gap: 10px; }
.ee-page .dngn-cover-thumbnails a { flex-basis: 52px; inline-size: 52px; block-size: 52px; padding: 2px; border-color: #775147; border-radius: 0; background: #050505; }
.ee-page .dngn-cover-thumbnails a:hover { border-color: var(--dngn-cyan); }
.ee-page .ee-logo { margin: 0 0 22px -7px; inline-size: min(510px, calc(100% + 7px)); }
.ee-logo img { display: block; inline-size: 100%; block-size: auto; }
.ee-page .ee-subtitle { display: inline-block; padding: 12px 16px 16px; background-image: var(--ee-blood-paper); background-size: auto, 600px auto; clip-path: var(--ee-cut); transform: rotate(-1deg); color: #fff0df; font: 400 clamp(.9375rem, .75rem + .5vw, 1.125rem)/1.45 "EE Stamp", Impact, sans-serif; text-transform: uppercase; }
.ee-proof { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-block-start: 22px; }
.ee-author { font-size: .8125rem; color: var(--dngn-muted) !important; text-decoration: underline !important; text-underline-offset: 4px; }
.ee-page .ee-proof .dngn-byline { margin-block-start: 0 !important; }
.ee-page .dngn-bestseller { background: #170e0d; }
.ee-rating { display: inline-flex; align-items: center; gap: 7px; font: 600 .75rem/1.5 var(--dngn-mono); }
.ee-rating > span:first-child { color: var(--dngn-cyan); }
.ee-rating > span:last-child { color: var(--dngn-muted); font-size: .625rem; }
.ee-page .dngn-intro { margin-block-start: 22px !important; color: var(--dngn-muted); max-inline-size: 35em; }
.ee-page .dngn-price { padding-block-start: 22px; border-block-start: 1px solid var(--dngn-rule); margin-block-start: 24px; }
.ee-page .dngn-price strong { font-size: 1.5625rem; }
.ee-page .dngn-button { min-block-size: 56px; border: 1px solid #e4696b; border-radius: 0; background-image: var(--ee-blood-paper); background-size: auto, 600px auto; color: #fff6e9 !important; box-shadow: 4px 4px 0 #350b13; text-transform: uppercase; letter-spacing: .035em; }
.ee-page .dngn-button:hover { background-image: none; background-color: #c33040; border-color: #ff9d88; }
.ee-page .dngn-wishlist { border-radius: 0; border-color: #8b5147; background: #080808; color: var(--dngn-text) !important; }
.ee-page .dngn-wishlist:hover { background: #301211; }
.ee-page .dngn-secondary { border-radius: 0; background: #160d0d; }
.ee-page .dngn-secondary:hover, .ee-page .dngn-secondary[aria-pressed="true"] { background: var(--ee-red); color: #fff6e9; }
.ee-page .dngn-quick-links { gap: 12px 24px; margin-block-start: 20px; }
.ee-page .dngn-text-link { font-size: .6875rem; }
.ee-page .dngn-community .dngn-secondary { inline-size: 100%; }
.ee-pages { padding-block-end: 32px; }
.ee-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 28px 20px 32px; background-image: var(--ee-blood-paper); background-size: auto, 850px auto; clip-path: var(--ee-cut); transform: rotate(-.8deg); text-align: center; }
.ee-facts > div + div { border-inline-start: 1px solid #f1b5b452; }
.ee-facts dt { color: var(--ee-paper); font: 400 3.75rem/1.1 "EE Comic", Impact, sans-serif; text-shadow: 2px 3px 0 #4c1017; }
.ee-facts dd { margin-block-start: 8px; color: #f8e1d6; font: 600 .625rem/1.5 var(--dngn-mono); text-transform: uppercase; letter-spacing: .04em; }
.ee-page .dngn-section { position: relative; padding-block: 72px; border-block-start: 0; border-block-end: 1px solid #73534d80; }
.ee-page .ee-description { isolation: isolate; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 70px; padding-top: 0px;}
.ee-description > :not(.ee-atmosphere), .ee-fear-fest > :not(.ee-atmosphere), .ee-creators > :not(.ee-atmosphere) { position: relative; z-index: 1; }
.ee-atmosphere { position: absolute; z-index: 0; display: block; max-inline-size: none; pointer-events: none; user-select: none; }
.ee-atmosphere--moth { z-index: 2; inset-inline-start: 140px; inset-block-end: 0; inline-size: min(420px, 42%); block-size: 100%; object-fit: contain; object-position: center bottom; opacity: 1; }
.ee-page .ee-description h2 { max-inline-size: 8em; }
.ee-page .dngn-prose { color: var(--dngn-muted); font-size: 1.0625rem; line-height: 1.8; }
.ee-page .dngn-prose > p:last-child { margin-block-end: 0; color: inherit; font-size: inherit; }
.ee-page .dngn-prose :where(h3, h4) { font-family: "EE Comic", Impact, sans-serif; letter-spacing: .025em; }
.ee-page .dngn-prose > :where(ol, ul) { columns: 1; }
.ee-encounters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; padding: 0; margin: 32px 0 0; list-style: none; }
.ee-encounters li { padding-block: 21px; border-block-start: 1px solid var(--dngn-rule); }
.ee-page .ee-encounters h3 { color: var(--ee-paper); font-size: clamp(1.25rem, 1rem + .65vw, 1.625rem); line-height: 1.3; letter-spacing: .02em; text-transform: uppercase; }
.ee-encounters p { margin-block-start: 5px; color: var(--dngn-muted); font-size: .9375rem; }
.ee-investigations { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; padding-block-start: 28px; margin-block-start: 12px; border-block-start: 1px solid var(--dngn-rule); }
.ee-page .ee-investigations h3 { color: #ef9991; font-size: 1.875rem; line-height: 1.25; text-transform: uppercase; }
.ee-investigations p { color: var(--dngn-muted); font-size: 1rem; }
.ee-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; max-inline-size: 960px; margin: 36px auto 0; border: 3px solid #61403f; background: #61403f; }
.ee-gallery a { display: block; min-inline-size: 0; cursor: zoom-in; line-height: 0; background: #030303; }
.ee-gallery img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 4; object-fit: contain; }
.ee-gallery a:hover { outline: 2px solid var(--dngn-cyan); outline-offset: -4px; }
.ee-page .ee-fear-fest { isolation: isolate; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 70px; }
.ee-fear-fest-art { display: block; padding: 30px 24px 36px; background-image: var(--ee-blood-paper); background-size: auto, 600px auto; clip-path: var(--ee-cut); transform: rotate(-3deg); }
.ee-fear-fest-art img { display: block; inline-size: min(310px, 100%); block-size: auto; margin-inline: auto; }
.ee-page .ee-fear-fest h2 { font-size: clamp(1.875rem, 1rem + 2vw, 2.625rem); }
.ee-fear-fest h2 + p { margin-block-start: 24px; }
.ee-fear-fest p { color: var(--dngn-muted); font-size: 1rem; line-height: 1.8; }
.ee-fear-fest p + p { margin-block-start: 20px; }
.ee-fear-fest .dngn-text-link { margin-block-start: 20px; }
.ee-atmosphere--earworm { inset-inline-start: -20px; inset-block-start: 0; inline-size: 36%; block-size: 100%; object-fit: contain; }
.ee-creators { isolation: isolate; }
.ee-atmosphere--organ {inset-inline-end: -48px;
    inset-block-start: 20px;
    inline-size: min(1000px, 40%);
    block-size: auto;
    transform: rotate(4deg); }
.ee-credits-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 52px; margin-block-start: 40px; }
.ee-credit-team:nth-child(2) { grid-row: span 2; }
.ee-page .ee-credit-team h3 { display: inline-block; margin-block-end: 16px; padding: 6px 9px 10px; color: #fff0df; background-image: var(--ee-blood-paper); background-size: auto, 500px auto; clip-path: var(--ee-cut); font: 400 .9375rem/1.4 "EE Stamp", Impact, sans-serif; text-transform: uppercase; }
.ee-credit-team ul { margin: 0; padding: 0; list-style: none; color: var(--dngn-muted); font-size: .9375rem; line-height: 1.8; }
.ee-credit-team li + li { margin-block-start: 3px; }
.ee-thanks { max-inline-size: 65ch; padding-inline-start: 14px; margin-block-start: 36px !important; border-inline-start: 2px solid var(--ee-red); color: var(--dngn-muted); font-size: .875rem; }
.ee-creator-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 32px 0 0; padding: 0; }
.ee-creator-list > li { position: relative; min-inline-size: 0; }
.ee-creator { display: flex; align-items: center; gap: 16px; padding-block: 20px; border-block: 1px solid var(--dngn-rule); }
.ee-creator:hover { color: var(--dngn-cyan); }
.ee-creator > img { flex: 0 0 64px; inline-size: 64px; block-size: 64px; border: 1px solid #866252; object-fit: cover; filter: saturate(.75); }
.ee-creator > span { flex: 1; min-inline-size: 0; overflow-wrap: anywhere; }
.ee-creator strong { display: block; font: 600 .8125rem/1.5 var(--dngn-mono); }
.ee-creator small { display: block; margin-block-start: 4px; color: var(--dngn-muted); font-size: .75rem; }
.ee-creator > .dngn-icon { inline-size: 18px; block-size: 18px; color: var(--dngn-cyan); }
.ee-creator-rating { margin-block-start: 24px !important; }
.ee-muted { color: var(--dngn-muted); font-size: .9375rem; }
.ee-page .dngn-disclosure { display: flex; align-items: center; gap: 10px; font-size: .75rem; }
.ee-page .dngn-disclosure .dngn-icon { inline-size: 17px; block-size: 17px; color: var(--dngn-cyan); }
.ee-page .dngn-review { padding: 24px 0; border-block-start: 2px solid var(--dngn-rule); background: transparent; }
.ee-page .dngn-review blockquote { font-size: 1.0625rem; overflow-wrap: anywhere; white-space: pre-line; }
.ee-page .dngn-reviews { gap: 24px 40px; }
.ee-page .dngn-stars { color: var(--dngn-cyan); }
.ee-page .dngn-dialog { border-color: var(--ee-red); }
.ee-page .dngn-dialog-controls { flex-wrap: wrap; }

@media (max-width: 1000px) {
    .ee-page .dngn-container { inline-size: calc(100% - 48px); }
    .ee-page .ee-overview { gap: 38px; min-block-size: 0; padding-block: 40px 60px; }
    .ee-book-display { padding: 16px; }
    .ee-page .ee-description, .ee-page .ee-fear-fest { gap: 38px; }
    .ee-atmosphere--organ { inset-inline-end: 0; }
    .ee-encounters, .ee-investigations { column-gap: 38px; }
    .ee-credits-grid { column-gap: 28px; }
    .ee-creator-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 740px) {
    .ee-page .dngn-container { inline-size: calc(100% - 40px); }
    .ee-hero { padding-block-start: 14px; }
    .ee-festival-link img { inline-size: 80px; }
    .ee-page .ee-overview { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-block: 28px 48px; }
    .ee-book-display { inline-size: min(370px, 100%); padding: 14px; }
    .ee-cover { inline-size: min(300px, 100%) !important; box-shadow: 5px 6px 0 #8b1925, 9px 11px 0 #090709; }
    .ee-page .dngn-cover-thumbnails { margin-block-start: 30px; gap: 8px; }
    .ee-page .dngn-cover-thumbnails a { flex-basis: 44px; inline-size: 44px; block-size: 44px; }
    .ee-page .ee-logo { inline-size: min(420px, calc(100% + 7px)); margin-block-end: 18px; }
    .ee-page .dngn-price { padding-block-start: 18px; }
    .ee-page .dngn-button { font-size: .8125rem; }
    .ee-facts { padding: 22px 6px 26px; }
    .ee-facts dt { font-size: 2.75rem; }
    .ee-facts dd { max-inline-size: 14ch; margin-inline: auto; font-size: .5625rem; }
    .ee-page .dngn-section { padding-block: 48px; }
    .ee-page .ee-description, .ee-page .ee-fear-fest { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .ee-atmosphere--moth { inset-inline-start: auto; inset-inline-end: -10px; inset-block-start: -80px; inset-block-end: auto; inline-size: 140px; block-size: auto; }
    .ee-page .dngn-prose { font-size: 1rem; }
    .ee-encounters { grid-template-columns: minmax(0, 1fr); margin-block-start: 24px; }
    .ee-encounters li { padding-block: 18px; }
    .ee-investigations { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .ee-gallery { margin-block-start: 28px; border-width: 2px; gap: 2px; }
    .ee-fear-fest-art { max-inline-size: 300px; padding: 24px; }
    .ee-atmosphere--earworm { inset-inline-start: auto; inset-inline-end: -10px; inset-block-start: 12px; inline-size: 130px; block-size: auto; }
    .ee-atmosphere--organ { inset-inline-end: -5px; inset-block-start: 25px; inline-size: 90px; }
    .ee-credits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; margin-block-start: 32px; }
    .ee-credit-team:nth-child(2) { grid-row: span 3; }
    .ee-page .ee-credit-team h3 { font-size: .75rem; }
    .ee-credit-team ul { font-size: .875rem; }
    .ee-creator-list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .ee-page .dngn-reviews { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
    .ee-page .ee-subtitle { padding-inline: 12px; }
    .ee-credits-grid { grid-template-columns: minmax(0, 1fr); }
    .ee-credit-team:nth-child(2) { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .ee-cover, .ee-gallery a { transition: none; }
}
@media (forced-colors: active) {
    .ee-page { background: Canvas; }
    .ee-cutout, .ee-horror-line, .ee-facts dt { color: CanvasText; text-shadow: none; }
    .ee-cutout, .ee-facts, .ee-fear-fest-art, .ee-page .ee-subtitle, .ee-page .ee-credit-team h3 { clip-path: none; background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
    .ee-cover, .ee-gallery, .ee-page .dngn-button { box-shadow: none; border-color: CanvasText; }
    .ee-atmosphere { display: none; }
}
