/* Section opening pages: Wild Tales, Did You Know?, On This Day.
   Drawn hero, cropped lead photo, Surprise me and fact ticker. Loaded after polish.css. */
.cat-wild{--sec:var(--accent-wild)}
.cat-knowledge{--sec:var(--accent-know)}
.cat-onthisday{--sec:var(--accent-onthisday)}
:root{--ease:cubic-bezier(.2,.75,.2,1)}

/* ===== Hero: art above on phones, beside the text on larger screens ===== */
.ed-hero{padding:1.5rem 1.5rem 2.2rem}
.ed-hero-inner{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
.ed-hero-art{order:-1;justify-self:center;width:min(76vw,290px)}
.hero-art{display:block;width:100%;height:auto;overflow:visible}
.ed-hero-copy{min-width:0}
.ed-hero-kicker{margin-bottom:.9rem}
.ed-hero-title{font-size:clamp(2.2rem,9.5vw,3.4rem)}
.ed-hero-meta{flex-wrap:wrap;gap:.4rem 1.4rem;color:rgb(245 240 232 / 44%)}
@media(min-width:900px){
  .ed-hero{padding:3.4rem 1.5rem 3.6rem}
  .ed-hero-inner{grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);align-items:center;gap:3rem}
  .ed-hero-copy{order:1}
  .ed-hero-art{order:2;justify-self:end;width:100%;max-width:440px}
  .ed-hero-title{font-size:clamp(2.6rem,4.6vw,4.3rem)}
}

/* hero actions: Surprise me + progress */
.ed-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.3rem;margin-top:1.3rem}
.ed-surprise{display:inline-flex;align-items:center;gap:.55rem;padding:.62rem 1.1rem;border:1px solid var(--sec);border-radius:99px;background:transparent;color:var(--sec);font:700 .8rem/1 var(--font-body);letter-spacing:.04em;cursor:pointer;transition:background .25s,color .25s,transform .25s var(--ease)}
.ed-surprise svg{transition:transform .5s var(--ease)}
.ed-surprise:hover,.ed-surprise:focus-visible{background:var(--sec);color:#10241b;outline:none}
.ed-surprise:hover svg,.ed-surprise:focus-visible svg{transform:rotate(180deg)}
.ed-surprise:active{transform:scale(.97)}
/* Did You Know? ticker */
.ed-fact{margin-top:1.3rem;max-width:50ch;min-height:3.4em;font-family:var(--font-display);font-size:1.08rem;line-height:1.35;color:rgba(245,240,232,.78)}
.ed-fact-label{display:block;margin-bottom:.2rem;font:700 .62rem/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--sec)}
.ed-fact-text{display:inline;color:#f5f0e8;font-style:italic;transition:opacity .35s ease}
.ed-fact-text.is-out{opacity:0}
.ed-fact-text:hover{text-decoration:underline;text-underline-offset:3px}

/* ===== Hero artwork ===== */
.hero-art text{font-family:var(--font-display)}
.hero-art-wild .a-label{font-size:15px;font-weight:700;letter-spacing:.14em;fill:#2a1519}
.hero-art-wild .a-stamp-text{font-size:17px;font-weight:700;letter-spacing:.08em;fill:#d23a47}
.hero-art-know .a-q{font-size:34px;font-style:italic;font-weight:600;fill:#9bb9ff;fill-opacity:.8}
.hero-art-day .a-month{font:700 15px var(--font-body);letter-spacing:.28em;fill:#f3ecdc;text-transform:uppercase}
.hero-art-day .a-day{font-size:78px;font-weight:700;fill:#17302a}
.hero-art-day .a-week{font:700 10.5px var(--font-body);letter-spacing:.24em;fill:#0e7a63;text-transform:uppercase}
.hero-art-day .a-years text{font-size:21px;font-style:italic;font-weight:600}
.hero-art-day .a-peel{opacity:0}
.hero-art-know .a-spin{transform-origin:0 0}
.hero-art-know .a-spin,.hero-art-know .a-glow{transform-box:fill-box}

/* Entrance drawings and gentle loops run only while visible and motion is allowed. */
.is-visible-effect .a-string{stroke-dasharray:1;animation:h-draw 1.2s .2s cubic-bezier(.5,0,.25,1) both}
.is-visible-effect .a-pin{transform-box:fill-box;transform-origin:center;animation:h-pin .45s cubic-bezier(.3,1.6,.5,1) both}
.is-visible-effect .a-pin:nth-of-type(2){animation-delay:.9s}
.is-visible-effect .a-stamp{animation:h-thud .5s 1.45s cubic-bezier(.3,1.4,.5,1) both}
.is-visible-effect .a-photo{transform-box:fill-box;transform-origin:50% 0;animation:h-sway 4.5s 1.2s ease-in-out infinite alternate}
.is-visible-effect .a-bulb{stroke-dasharray:1;animation:h-draw 1.4s .1s cubic-bezier(.5,0,.25,1) both}
.is-visible-effect .a-glow{animation:h-glow 3.4s ease-in-out infinite}
.is-visible-effect .a-ray{animation:h-ray 3.4s ease-in-out infinite;animation-delay:calc(var(--i)*.12s)}
.is-visible-effect .a-fil{animation:h-fil 3.4s ease-in-out infinite}
.is-visible-effect .a-spin{animation:h-spin 9s linear infinite}
.is-visible-effect .a-q{animation:h-bob 3.8s ease-in-out infinite alternate}
.is-visible-effect .a-q2{animation-delay:-1.2s}.is-visible-effect .a-q3{animation-delay:-2.4s}
.is-visible-effect .a-peel{transform-origin:200px 62px;animation:h-peel 1.1s .9s cubic-bezier(.6,0,.4,1) both}
.is-visible-effect .a-years text{animation:h-fade .8s both}
.is-visible-effect .a-years text:nth-child(2){animation-delay:.3s}.is-visible-effect .a-years text:nth-child(3){animation-delay:.6s}.is-visible-effect .a-years text:nth-child(4){animation-delay:.9s}
@keyframes h-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes h-pin{from{opacity:0;transform:translateY(-12px) scale(1.6)}to{opacity:1;transform:none}}
@keyframes h-thud{from{opacity:0;transform:translate(262px,152px) rotate(-11deg) scale(1.9)}to{opacity:1;transform:translate(262px,152px) rotate(-11deg) scale(1)}}
@keyframes h-sway{from{transform:rotate(7deg)}to{transform:rotate(3.5deg)}}
@keyframes h-glow{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes h-ray{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes h-fil{0%,100%{stroke:#bcd0ff}50%{stroke:#fff}}
@keyframes h-spin{to{transform:rotate(360deg)}}
@keyframes h-bob{from{transform:translateY(0)}to{transform:translateY(-8px)}}
@keyframes h-peel{from{opacity:1;transform:scaleY(1)}to{opacity:1;transform:scaleY(0)}}
@keyframes h-fade{from{opacity:0}to{opacity:1}}

/* ===== Latest story: photo fills a cropped 16:10 frame; side by side on large screens ===== */
.ed-featured-card.has-photo{overflow:hidden!important;display:grid;grid-template-columns:minmax(0,1fr);background:#0b1a12;border-radius:var(--radius-lg)}
.ed-featured-photo{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:#0b1a12}
.ed-featured-img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.ed-featured-card:hover .ed-featured-img{transform:scale(1.035)}
.ed-featured-emoji{position:absolute;inset:0;display:grid;place-items:center;font-size:4.5rem;background:#1a1200}
.ed-featured-card.has-photo .ed-featured-visual{min-height:0;padding:1.4rem 1.25rem 1.6rem;align-items:flex-start;border-radius:0}
.ed-featured-card.has-photo .ed-featured-visual-inner{padding-left:1.1rem}
.ed-featured-card.has-photo .ed-featured-title{font-size:clamp(1.55rem,6.4vw,2.3rem)}
@media(min-width:900px){
  .ed-featured-card.has-photo{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
  .ed-featured-card.has-photo .ed-featured-photo{order:2}
  .ed-featured-card.has-photo .ed-featured-visual{order:1;align-items:center;padding:2.4rem 2.2rem}
}

/* corners follow each series' own shape */
.cat-wild .ed-featured-card.has-photo{border-radius:6px 22px 22px 22px}
.cat-knowledge .ed-featured-card.has-photo{border-radius:4px}

/* Keep animation progress when pausing an offscreen/hidden hero. */
.ed-hero-art.is-paused-effect *{animation-play-state:paused!important}

@media(prefers-reduced-motion:reduce){
  .is-visible-effect *{animation:none!important}
  .ed-featured-img,.ed-surprise svg{transition:none}
}