/* V20 article styles. Intentionally isolated from the V17 homepage. */
.article-page{background:#fffdf9;color:var(--ink)}
.article-header{max-width:1380px;margin:0 auto;padding:18px clamp(18px,4vw,56px);display:flex;align-items:center;justify-content:space-between;gap:24px;background:#fff}
.article-logo{display:block;width:min(245px,46vw)}
.article-logo img{width:100%;height:auto;object-fit:contain}
.article-header-nav{display:flex;align-items:center;gap:10px}
.article-header-nav a{font-weight:1000;color:var(--purple);text-decoration:none;padding:10px 13px;border-radius:999px}
.article-header-nav a:hover,.article-header-nav a:focus-visible{background:#f0e7f8}

.article-hero{position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(135deg,#f4ebfb 0%,#fffdf9 58%,#f4ffba 100%)}
.article-hero::before,.article-hero::after{content:"";position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}
.article-hero::before{width:420px;height:420px;background:rgba(123,55,158,.09);left:-180px;top:-210px}
.article-hero::after{width:310px;height:310px;background:rgba(211,237,74,.22);right:-110px;bottom:-150px}
.article-hero-halloween{background:linear-gradient(135deg,#f2e6fb 0%,#fff6ea 57%,#fff1d0 100%)}
.article-hero-music{background:linear-gradient(135deg,#ece6fb 0%,#fff8ef 56%,#efffc6 100%)}
.article-hero-websites{background:linear-gradient(135deg,#f0e8fa 0%,#fff 50%,#ffe5f0 100%)}
.article-hero-inner{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:clamp(48px,7vw,92px) clamp(20px,5vw,56px);display:grid;grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);align-items:center;gap:clamp(34px,6vw,76px)}
.article-hero-copy{min-width:0}
.article-hero h1{font-family:Impact,"Arial Black",ui-sans-serif,sans-serif;text-transform:uppercase;font-size:clamp(3.15rem,6.5vw,6.8rem);line-height:.93;letter-spacing:-.02em;margin:0;max-width:820px;text-wrap:balance}
.article-hero .eyebrow{margin-bottom:16px}
.article-hero-visual{position:relative;margin:0;min-height:390px;display:flex;align-items:center;justify-content:center;border-radius:46% 54% 50% 50% / 38% 42% 58% 62%;background:linear-gradient(145deg,#e9daf3,#fff3c8);isolation:isolate}
.article-hero-photo{position:relative;z-index:1;display:block;width:min(100%,510px);aspect-ratio:4/5;object-fit:cover;border-radius:46% 54% 50% 50% / 38% 42% 58% 62%;box-shadow:0 28px 70px rgba(41,8,63,.22);transform:rotate(2deg)}
.article-character{position:absolute;z-index:2;pointer-events:none;filter:drop-shadow(0 16px 18px rgba(31,8,43,.18))}
.article-character-web{width:min(39%,180px);left:-12px;bottom:-5px;transform:rotate(-4deg)}
.article-character-movie{width:min(31%,142px);right:-10px;bottom:-10px;transform:rotate(5deg)}
.article-character-music{width:min(46%,210px);left:-24px;bottom:-28px;transform:rotate(-3deg)}
.article-photo-credit{position:absolute;right:8px;bottom:-25px;font-size:.68rem;color:#786d7d}
.article-photo-credit a{color:inherit;text-decoration:none}
.article-photo-credit a:hover,.article-photo-credit a:focus-visible{text-decoration:underline}

.article-layout{max-width:1160px;margin:0 auto;padding:clamp(52px,7vw,92px) clamp(18px,4vw,42px) 84px}
.article-prose{max-width:850px;margin:0 auto 52px;font-family:Georgia,"Times New Roman",serif;font-size:1.12rem;line-height:1.82}
.article-prose>p{margin:0 0 24px}
.article-archive-note,.article-favorite-note{font-family:ui-rounded,"Arial Rounded MT Bold","Trebuchet MS",system-ui,-apple-system,sans-serif;padding:18px 0 18px 22px;margin:28px 0;line-height:1.55;border-left:5px solid;border-radius:0;background:transparent}
.article-archive-note{border-color:#9e79b4;color:#55485b}
.article-favorite-note{border-color:#d4e95d;color:#392c18;font-weight:800}

/* Kid-friendly websites: editorial alphabet columns rather than individual boxes. */
.website-directory{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(36px,7vw,86px);row-gap:0;align-items:start}
.website-letter-card{position:relative;padding:30px 0 34px 74px;border-top:2px solid #eadff0;background:transparent;box-shadow:none;border-radius:0}
.website-letter-card:nth-child(1),.website-letter-card:nth-child(2){border-top:0;padding-top:8px}
.website-letter-card h2{position:absolute;left:0;top:24px;width:54px;height:54px;display:grid;place-items:center;border-radius:50%;font-family:Impact,"Arial Black",ui-sans-serif,sans-serif;font-size:2rem;line-height:1;color:#fff;background:var(--purple);margin:0;box-shadow:0 8px 20px rgba(58,16,84,.16)}
.website-letter-card:nth-child(1) h2,.website-letter-card:nth-child(2) h2{top:2px}
.website-letter-card ul{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.website-letter-card li{margin:0}
.website-letter-card a,.website-letter-card li>span{display:inline-block;text-decoration:none;padding:7px 0;font-weight:800;line-height:1.35;background:transparent;border-radius:0}
.website-letter-card a{color:#33263a;border-bottom:1px solid transparent}
.website-letter-card a:hover,.website-letter-card a:focus-visible{color:var(--purple);border-bottom-color:#cbb2d9}
.website-letter-card li>span{color:#756b79}
.article-favorite{color:#e68700;margin-left:3px}

/* Movies: numbered editorial list with generous separators. */
.article-page .movie-list{display:block;max-width:980px;margin:0 auto}
.article-page .movie-card{position:relative;display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px 30px;padding:38px 0 42px;border:0;border-bottom:2px solid #eee4f1;border-radius:0;background:transparent;box-shadow:none}
.article-page .movie-card:first-child{padding-top:8px}
.article-page .movie-card-top{background:linear-gradient(90deg,rgba(244,255,186,.62),rgba(255,255,255,0) 58%);border:0;border-bottom:2px solid #e8dda4}
.article-page .movie-card-heading{display:contents}
.article-page .movie-number{grid-column:1;grid-row:1 / span 2;font-family:Impact,"Arial Black",ui-sans-serif,sans-serif;font-size:4rem;line-height:.82;color:#d8cadd;letter-spacing:.01em;text-align:right;padding-top:5px}
.article-page .movie-card h2{grid-column:2;font-family:Impact,"Arial Black",ui-sans-serif,sans-serif;text-transform:uppercase;font-size:clamp(1.8rem,3vw,2.7rem);line-height:1.01;letter-spacing:-.01em;color:var(--purple);margin:0;text-wrap:balance}
.article-page .movie-top-pick{grid-column:2;justify-self:start;display:inline-block;background:#f4ffba;color:#3a2b16;border:0;border-radius:999px;padding:6px 10px;font-size:.72rem;font-weight:1000;text-transform:uppercase;letter-spacing:.05em;margin-top:3px}
.article-page .movie-card-copy{grid-column:2;font-family:Georgia,"Times New Roman",serif;font-size:1.04rem;line-height:1.75;color:#3f3544;max-width:800px}
.article-page .movie-card-copy p{margin:0 0 13px}.article-page .movie-card-copy p:last-child{margin-bottom:0}

/* Songs: playlist-style rows, less card-like. */
.article-page .song-list{display:block;max-width:980px;margin:0 auto}
.article-page .song-card{position:relative;display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px 26px;padding:34px 0 38px;border:0;border-bottom:2px solid #eee4f1;border-radius:0;background:transparent;box-shadow:none}
.article-page .song-card:first-child{padding-top:8px}
.article-page .song-card-heading{display:contents}
.article-page .song-number{grid-column:1;grid-row:1 / span 2;width:62px;height:62px;display:grid;place-items:center;border-radius:50%;font-family:Impact,"Arial Black",ui-sans-serif,sans-serif;font-size:1.65rem;line-height:1;color:#fff;background:var(--purple);box-shadow:0 9px 22px rgba(50,10,75,.14)}
.article-page .song-card h2{grid-column:2;font-family:Impact,"Arial Black",ui-sans-serif,sans-serif;text-transform:uppercase;font-size:clamp(1.7rem,2.8vw,2.55rem);line-height:1.02;letter-spacing:-.01em;color:var(--purple);margin:0;text-wrap:balance}
.article-page .song-card-copy{grid-column:2;font-family:Georgia,"Times New Roman",serif;font-size:1.04rem;line-height:1.75;color:#3f3544;max-width:800px}
.article-page .song-card-copy p{margin:0 0 13px}.article-page .song-card-copy p:last-child{margin-bottom:0}
.article-page .song-card-copy a{color:var(--purple);font-weight:800}

.article-bottom-nav{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:52px auto 0}
.article-footer{text-align:center;padding:28px 20px;background:var(--ink);color:#ad9db6;font-size:.78rem}

/* Articles hub */
.articles-hub-page .article-hero-inner{grid-template-columns:1fr;max-width:1040px}
.articles-hub-page .articles-hub-intro{max-width:720px;margin:18px 0 0;font-size:1.1rem;line-height:1.6;color:#574b5d;font-weight:700}
.article-page .articles-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;align-items:start}
.article-page .article-card{position:relative;display:flex;flex-direction:column;background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;min-width:0}
.article-card-visual{position:relative;margin:0 0 22px;aspect-ratio:4/3;overflow:visible;border-radius:34% 66% 54% 46% / 44% 40% 60% 56%;background:linear-gradient(145deg,#eee1f6,#fff1c8)}
.article-card-visual>img:first-child{display:block;width:100%;height:100%;object-fit:cover;border-radius:34% 66% 54% 46% / 44% 40% 60% 56%;box-shadow:0 18px 42px rgba(29,4,45,.14)}
.article-card-character{position:absolute;right:-8px;bottom:-12px;width:31%;max-height:68%;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(31,8,43,.16))}
.article-page .article-card-kicker{margin:0 0 10px;font-weight:1000;text-transform:uppercase;letter-spacing:.06em;color:var(--purple);font-size:.76rem}
.article-page .article-card h2{font-family:Impact,"Arial Black",ui-sans-serif,sans-serif;text-transform:uppercase;font-size:clamp(1.7rem,2.65vw,2.45rem);line-height:1.01;margin:0 0 14px;text-wrap:balance}
.article-page .article-card h2 a{text-decoration:none;color:var(--ink)}
.article-page .article-card h2 a:hover,.article-page .article-card h2 a:focus-visible{color:var(--purple)}
.article-page .article-card>p:not(.article-card-kicker){font-family:Georgia,"Times New Roman",serif;line-height:1.65;margin:0 0 18px;color:#493e4e}
.article-page .article-card-link{margin-top:auto;font-weight:1000;color:var(--purple);text-decoration:none}

@media(max-width:980px){
  .article-hero-inner{grid-template-columns:1fr;gap:42px}.article-hero-copy{max-width:860px}.article-hero-visual{min-height:360px;width:min(600px,92%);margin:0 auto}.article-hero-photo{aspect-ratio:16/10;width:100%;border-radius:33% 67% 45% 55% / 52% 40% 60% 48%}.article-character-web{width:150px}.article-character-movie{width:125px}.article-character-music{width:175px}
  .article-page .articles-grid{grid-template-columns:1fr;gap:58px}.article-card-visual{max-width:620px}
}
@media(max-width:760px){
  .article-header{padding:12px 14px;gap:10px}.article-logo{width:min(175px,47vw)}.article-header-nav{gap:2px}.article-header-nav a{padding:9px 8px;font-size:.82rem}
  .article-hero-inner{padding:46px 18px 54px;gap:34px}.article-hero h1{font-size:clamp(2.75rem,13.5vw,4.55rem)}.article-hero-visual{min-height:300px;width:100%}.article-hero-photo{aspect-ratio:5/4}.article-photo-credit{right:4px;bottom:-23px;font-size:.62rem}.article-character-web{width:115px;left:-6px}.article-character-movie{width:100px;right:-3px}.article-character-music{width:135px;left:-8px;bottom:-20px}
  .article-layout{padding:44px 17px 64px}.article-prose{font-size:1.04rem;line-height:1.74;margin-bottom:34px}
  .website-directory{grid-template-columns:1fr}.website-letter-card,.website-letter-card:nth-child(2){border-top:2px solid #eadff0;padding:26px 0 29px 62px}.website-letter-card:first-child{border-top:0;padding-top:5px}.website-letter-card h2,.website-letter-card:nth-child(2) h2{width:46px;height:46px;font-size:1.72rem;top:21px}.website-letter-card:first-child h2{top:0}
  .article-page .movie-card{grid-template-columns:66px minmax(0,1fr);gap:10px 16px;padding:30px 0 32px}.article-page .movie-number{font-size:2.65rem}.article-page .movie-card h2{font-size:1.65rem}.article-page .movie-card-copy{font-size:1rem;line-height:1.68}
  .article-page .song-card{grid-template-columns:58px minmax(0,1fr);gap:10px 14px;padding:28px 0 31px}.article-page .song-number{width:48px;height:48px;font-size:1.3rem}.article-page .song-card h2{font-size:1.6rem}.article-page .song-card-copy{font-size:1rem;line-height:1.68}
  .article-bottom-nav{display:grid;grid-template-columns:1fr;margin-top:38px}.article-bottom-nav .button{width:100%;box-shadow:none}
  .article-card-visual{margin-bottom:19px}.article-page .article-card h2{font-size:2rem}
}


/* V20 Halloween guide system: editorial rows, local character art, no homepage impact. */
.guide-hero-visual{position:relative;min-height:390px;display:grid;place-items:center;isolation:isolate}
.guide-hero-orb{position:absolute;width:min(88%,430px);aspect-ratio:1;border-radius:44% 56% 58% 42% / 46% 42% 58% 54%;background:linear-gradient(145deg,#eadcf4,#fff0c7);box-shadow:0 28px 70px rgba(41,8,63,.16);transform:rotate(4deg)}
.guide-hero-emoji{position:relative;z-index:1;font-size:clamp(7rem,14vw,11.5rem);line-height:1;filter:drop-shadow(0 16px 18px rgba(41,8,63,.14));transform:rotate(-5deg)}
.guide-hero-character{position:absolute;z-index:2;right:-4px;bottom:-18px;width:min(42%,190px);max-height:70%;object-fit:contain;filter:drop-shadow(0 16px 18px rgba(31,8,43,.18))}
.guide-deck{margin:22px 0 0;max-width:760px;font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.65;color:#5d5064;font-weight:750}
.guide-intro{max-width:860px;margin:0 auto 44px;font-family:Georgia,"Times New Roman",serif;font-size:1.12rem;line-height:1.82}
.guide-intro p{margin:0 0 22px}
.guide-callout{max-width:880px;margin:30px auto 48px;padding:21px 0 21px 24px;border-left:6px solid #d6ec54;font-weight:800;line-height:1.6;color:#453620}
.guide-callout strong{color:var(--purple)}
.guide-section{max-width:980px;margin:0 auto}
.guide-section-title{font-family:Impact,"Arial Black",ui-sans-serif,sans-serif;text-transform:uppercase;font-size:clamp(2rem,4vw,3.3rem);line-height:1;margin:0 0 18px;color:var(--purple);letter-spacing:-.01em}
.guide-section-lead{max-width:780px;margin:0 0 28px;font-family:Georgia,"Times New Roman",serif;font-size:1.05rem;line-height:1.75;color:#4b404f}
.guide-list{counter-reset:guide;display:block;margin:0 auto}
.guide-item{counter-increment:guide;position:relative;display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px 26px;padding:28px 0 31px;border-bottom:2px solid #eee4f1}
.guide-item::before{content:counter(guide);grid-column:1;grid-row:1 / span 2;font-family:Impact,"Arial Black",ui-sans-serif,sans-serif;font-size:3.2rem;line-height:.9;color:#d8cadd;text-align:right;padding-top:3px}
.guide-item h2,.guide-item h3{grid-column:2;font-family:Impact,"Arial Black",ui-sans-serif,sans-serif;text-transform:uppercase;font-size:clamp(1.5rem,2.6vw,2.25rem);line-height:1.04;margin:0;color:var(--purple);text-wrap:balance}
.guide-item-body{grid-column:2;font-family:Georgia,"Times New Roman",serif;font-size:1.02rem;line-height:1.72;color:#403644}
.guide-item-body p{margin:0 0 12px}.guide-item-body p:last-child{margin-bottom:0}
.guide-item-body ul{margin:10px 0 0;padding-left:1.25rem}.guide-item-body li{margin:5px 0}
.guide-qa-list .guide-item-body strong{font-family:ui-rounded,"Arial Rounded MT Bold","Trebuchet MS",system-ui,-apple-system,sans-serif;color:#362640}
.guide-checklist{columns:2;column-gap:52px;max-width:900px;margin:28px auto 0;padding:0;list-style:none}
.guide-checklist li{break-inside:avoid;position:relative;padding:10px 0 10px 34px;border-bottom:1px solid #eee4f1;font-weight:800;line-height:1.45}
.guide-checklist li::before{content:"☐";position:absolute;left:0;top:8px;color:var(--purple);font-size:1.25rem}
.guide-mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:34px auto 0;max-width:980px}
.guide-mini{padding:24px 0;border-top:4px solid #d9ef5c}
.guide-mini h3{font-family:Impact,"Arial Black",ui-sans-serif,sans-serif;text-transform:uppercase;font-size:1.55rem;line-height:1.05;margin:0 0 10px;color:var(--purple)}
.guide-mini p{margin:0;line-height:1.62;color:#514555}
.guide-note{max-width:880px;margin:48px auto 0;padding:24px 28px;border-radius:22px;background:#f6effa;font-weight:750;line-height:1.62;color:#514555}
.guide-note a{color:var(--purple);font-weight:900}
.article-page .article-card-visual.article-card-art{display:grid;place-items:center;background:linear-gradient(145deg,#eee1f6,#fff1c8);overflow:hidden}
.article-card-art .article-card-emoji{font-size:clamp(4.8rem,8vw,7.2rem);line-height:1;filter:drop-shadow(0 12px 14px rgba(31,8,43,.12));transform:rotate(-5deg)}
.article-card-art .article-card-character{right:-5px;bottom:-14px;width:32%;z-index:2}
.articles-section-heading{grid-column:1/-1;margin:18px 0 -2px;font-family:Impact,"Arial Black",ui-sans-serif,sans-serif;text-transform:uppercase;font-size:clamp(2.2rem,4vw,3.5rem);line-height:1;color:var(--purple)}
.articles-section-copy{grid-column:1/-1;margin:-12px 0 8px;max-width:760px;color:#625568;font-weight:750;line-height:1.55}
@media(max-width:900px){.guide-mini-grid{grid-template-columns:1fr 1fr}.guide-checklist{columns:1}}
@media(max-width:700px){.guide-hero-visual{min-height:290px}.guide-hero-character{width:min(39%,145px)}.guide-item{grid-template-columns:56px minmax(0,1fr);gap:8px 18px}.guide-item::before{font-size:2.4rem}.guide-mini-grid{grid-template-columns:1fr}.articles-section-heading,.articles-section-copy{grid-column:1}}


/* v21 — brand-color guide heroes */
.article-page .article-hero.hero-purple,
.article-page .article-hero.hero-orange,
.article-page .article-hero.hero-green{
  color:#fff;
  border-color:transparent;
}
.article-page .article-hero.hero-purple{background:linear-gradient(135deg,#4b0d78 0%,#6b1bad 58%,#8428c6 100%)}
.article-page .article-hero.hero-orange{background:linear-gradient(135deg,#e9540b 0%,#ff7018 58%,#ff8a2e 100%)}
.article-page .article-hero.hero-green{background:linear-gradient(135deg,#057f43 0%,#08b95a 58%,#1dca70 100%)}
.article-page .article-hero.hero-purple h1,
.article-page .article-hero.hero-orange h1,
.article-page .article-hero.hero-green h1,
.article-page .article-hero.hero-purple .eyebrow,
.article-page .article-hero.hero-orange .eyebrow,
.article-page .article-hero.hero-green .eyebrow,
.article-page .article-hero.hero-purple .guide-deck,
.article-page .article-hero.hero-orange .guide-deck,
.article-page .article-hero.hero-green .guide-deck,
.article-page .article-hero.hero-purple .articles-hub-intro,
.article-page .article-hero.hero-orange .articles-hub-intro,
.article-page .article-hero.hero-green .articles-hub-intro{color:#fff}
.article-page .article-hero.hero-purple .eyebrow,
.article-page .article-hero.hero-orange .eyebrow,
.article-page .article-hero.hero-green .eyebrow{opacity:.88}
.article-page .article-hero.hero-purple::before,
.article-page .article-hero.hero-orange::before,
.article-page .article-hero.hero-green::before{background:rgba(255,255,255,.11)}
.article-page .article-hero.hero-purple::after,
.article-page .article-hero.hero-orange::after,
.article-page .article-hero.hero-green::after{background:rgba(255,255,255,.09)}
.article-page .article-hero.hero-purple .guide-hero-orb,
.article-page .article-hero.hero-orange .guide-hero-orb,
.article-page .article-hero.hero-green .guide-hero-orb,
.article-page .article-hero.hero-purple .article-hero-visual,
.article-page .article-hero.hero-orange .article-hero-visual,
.article-page .article-hero.hero-green .article-hero-visual{
  background:rgba(255,255,255,.18);
  box-shadow:0 28px 70px rgba(28,7,42,.20);
}


/* v22 — rectangular stock photography + Halloween silhouette decorations */
.article-page .article-hero::before,
.article-page .article-hero::after{
  background:none !important;
  border-radius:0 !important;
  width:auto !important;
  height:auto !important;
  filter:grayscale(1) brightness(0) invert(1) !important;
  color:#fff;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  line-height:1;
  opacity:.14;
  pointer-events:none;
  z-index:0;
}
.article-page .article-hero::before{
  content:var(--hero-shape-a,"🦇");
  left:clamp(18px,4vw,70px);
  top:clamp(28px,5vw,76px);
  font-size:clamp(5rem,11vw,10rem);
  transform:rotate(-13deg);
}
.article-page .article-hero::after{
  content:var(--hero-shape-b,"🎃");
  right:clamp(18px,4vw,76px);
  bottom:clamp(20px,4vw,58px);
  font-size:clamp(4.5rem,9vw,8rem);
  transform:rotate(10deg);
}
.article-page .article-hero.decor-bats{--hero-shape-a:"🦇";--hero-shape-b:"🌙"}
.article-page .article-hero.decor-pumpkins{--hero-shape-a:"🎃";--hero-shape-b:"🕯️"}
.article-page .article-hero.decor-ghosts{--hero-shape-a:"👻";--hero-shape-b:"🕸️"}
.article-page .article-hero.decor-spiders{--hero-shape-a:"🕷️";--hero-shape-b:"🕸️"}
.article-page .article-hero.decor-moons{--hero-shape-a:"🌙";--hero-shape-b:"🦇"}
.article-page .article-hero.decor-skulls{--hero-shape-a:"💀";--hero-shape-b:"🦴"}
.article-page .article-hero.decor-cats{--hero-shape-a:"🐈‍⬛";--hero-shape-b:"🌙"}

.article-page .guide-hero-visual,
.article-page .article-hero-visual{
  position:relative;
  min-height:0;
  width:100%;
  display:block;
  margin:0;
  border-radius:18px;
  overflow:hidden;
  background:transparent !important;
  box-shadow:0 24px 55px rgba(27,5,42,.24);
  transform:none;
}
.article-page .guide-hero-photo,
.article-page .article-hero-photo{
  display:block;
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:18px;
  box-shadow:none;
  transform:none;
}
.article-page .article-photo-credit,
.article-page .article-character,
.article-page .guide-hero-character,
.article-page .guide-hero-orb,
.article-page .guide-hero-emoji{
  display:none !important;
}

.article-page .article-card-visual,
.article-page .article-card-visual.article-card-art{
  display:block;
  margin:0 0 22px;
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:14px;
  background:#eee7f2;
  box-shadow:0 16px 34px rgba(29,4,45,.13);
}
.article-page .article-card-visual>img:first-child,
.article-page .article-card-photo{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:auto;
  object-fit:cover;
  border-radius:0;
  box-shadow:none;
  transform:none;
}
.article-page .article-card-character,
.article-page .article-card-emoji{display:none !important}

@media(max-width:980px){
  .article-page .guide-hero-visual,
  .article-page .article-hero-visual{
    width:min(680px,100%);
    min-height:0;
    margin:0 auto;
    border-radius:16px;
  }
  .article-page .guide-hero-photo,
  .article-page .article-hero-photo{aspect-ratio:16/9;border-radius:16px}
}
@media(max-width:760px){
  .article-page .guide-hero-visual,
  .article-page .article-hero-visual{min-height:0;border-radius:12px}
  .article-page .guide-hero-photo,
  .article-page .article-hero-photo{aspect-ratio:4/3;border-radius:12px}
  .article-page .article-card-visual{border-radius:12px}
}