/* =========================================================
   SINGLE STORY
========================================================= */
.single-story-page{--story-sun:#e2c56b}

/* =========================================================
   HERO
========================================================= */
.single-story-hero{padding:clamp(85px,9vw,145px) 0 clamp(70px,8vw,115px);background:var(--clhf-cream-soft)}
.single-story-hero-grid{display:grid;grid-template-columns:minmax(170px,240px) 1fr;gap:clamp(45px,7vw,110px);align-items:start}

.single-story-side{padding-top:10px}
.single-story-category{font-family:var(--font-display);font-size:1.05rem;font-weight:800;color:var(--clhf-clay);text-decoration:none}
.single-story-category:hover{text-decoration:underline}

.single-story-meta{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin-bottom:28px;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--clhf-muted)}
.single-story-meta span{color:var(--clhf-clay)}
.single-story-meta time{position:relative;padding-left:17px}
.single-story-meta time::before{content:"";position:absolute;top:50%;left:0;width:4px;height:4px;border-radius:50%;background:currentColor;transform:translateY(-50%)}

.single-story-heading h1{max-width:1080px;margin:0 0 clamp(30px,4vw,48px);font-family:var(--font-display);font-size:clamp(3.4rem,6.4vw,6.8rem);font-weight:800;line-height:.96;letter-spacing:-.06em;color:var(--clhf-navy)}

.single-story-intro{max-width:900px;margin:0;font-size:clamp(1.2rem,1.55vw,1.52rem);line-height:1.72;color:var(--clhf-muted)}

/* =========================================================
   FEATURED IMAGE + SUN
========================================================= */
.single-story-featured{padding:clamp(28px,3vw,44px) 0;background:#fff}
.single-story-featured .container-wide{position:relative;isolation:isolate}

.single-story-featured .container-wide::before{content:"";position:absolute;z-index:0;top:-108px;left:50%;width:220px;height:220px;border-radius:50%;background:var(--story-sun);transform:translateX(-50%);pointer-events:none}

.single-story-featured-inner{position:relative;z-index:1;height:clamp(350px,52vw,720px);overflow:hidden;background:var(--clhf-cream-soft)}
.single-story-featured-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

/* =========================================================
   ARTICLE BODY
========================================================= */
.single-story-body{padding:clamp(90px,10vw,150px) 0;background:#fff}

.single-story-body-grid{display:grid;grid-template-columns:minmax(170px,240px) minmax(0,820px);gap:clamp(45px,7vw,110px);align-items:start}

.single-story-aside{position:sticky;top:130px;padding-top:8px}
.single-story-aside span{font-family:var(--font-display);font-size:1rem;font-weight:800;color:var(--clhf-clay)}

.single-story-content{font-size:clamp(1.08rem,1.2vw,1.27rem);line-height:1.88;color:var(--clhf-ink)}

.single-story-content>*:first-child{margin-top:0}
.single-story-content>*:last-child{margin-bottom:0}

.single-story-content p{margin:0 0 30px}
.single-story-content h2{margin:clamp(58px,7vw,90px) 0 26px;font-family:var(--font-display);font-size:clamp(2.4rem,4vw,4.3rem);font-weight:780;line-height:1.02;letter-spacing:-.05em;color:var(--clhf-navy)}
.single-story-content h3{margin:50px 0 20px;font-family:var(--font-display);font-size:clamp(1.75rem,2.8vw,2.8rem);font-weight:760;line-height:1.08;letter-spacing:-.035em;color:var(--clhf-navy)}

.single-story-content ul,.single-story-content ol{margin:30px 0;padding-left:28px}
.single-story-content li{margin-bottom:13px}

.single-story-content blockquote{margin:clamp(50px,6vw,80px) 0;padding:10px 0 10px clamp(28px,4vw,45px);border-left:5px solid var(--clhf-clay);font-family:var(--font-display);font-size:clamp(1.45rem,2.4vw,2.35rem);font-weight:650;line-height:1.4;color:var(--clhf-navy)}
.single-story-content blockquote p{margin:0}

.single-story-content figure{margin:clamp(45px,6vw,75px) 0}
.single-story-content figure img{display:block;width:100%;height:auto}
.single-story-content figcaption{margin-top:11px;font-size:.82rem;line-height:1.5;color:var(--clhf-muted)}

.single-story-content a{color:var(--clhf-clay);text-decoration:underline;text-underline-offset:3px}

/* =========================================================
   SHARE
========================================================= */
.single-story-share{padding:0 0 clamp(90px,9vw,135px);background:#fff}
.single-story-share-grid{display:grid;grid-template-columns:minmax(170px,240px) minmax(0,820px);gap:clamp(45px,7vw,110px)}

.single-story-share-inner{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-top:28px;border-top:1px solid var(--clhf-border)}
.single-story-share-inner>span{font-family:var(--font-display);font-size:.95rem;font-weight:800;color:var(--clhf-navy)}

.single-story-share-links{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.single-story-share-links a{font-size:.88rem;font-weight:700;color:var(--clhf-muted);text-decoration:none;transition:color .2s ease}
.single-story-share-links a:hover{color:var(--clhf-clay)}

/* =========================================================
   RELATED STORIES
========================================================= */
.single-story-related{padding:clamp(90px,10vw,150px) 0;background:var(--clhf-cream)}

.single-story-related-heading{display:grid;grid-template-columns:minmax(170px,240px) 1fr;gap:clamp(45px,7vw,110px);align-items:start;margin-bottom:clamp(50px,7vw,85px)}
.single-story-related-heading>span{padding-top:8px;font-family:var(--font-display);font-size:1.05rem;font-weight:800;color:var(--clhf-clay)}
.single-story-related-heading h2{max-width:900px;margin:0;font-family:var(--font-display);font-size:clamp(2.8rem,5vw,5.3rem);font-weight:780;line-height:1;letter-spacing:-.052em;color:var(--clhf-navy)}

.single-story-related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,5vw,75px)}

.single-story-related .story-card>a{display:block;text-decoration:none}
.single-story-related .story-card-image{position:relative;aspect-ratio:16/10;margin-bottom:25px;overflow:hidden;background:#fff}
.single-story-related .story-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.7,.2,1)}

.single-story-related .story-card-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.065em;color:var(--clhf-muted)}
.single-story-related .story-card-meta span{color:var(--clhf-clay)}
.single-story-related .story-card-meta time{position:relative;padding-left:15px}
.single-story-related .story-card-meta time::before{content:"";position:absolute;top:50%;left:0;width:4px;height:4px;border-radius:50%;background:currentColor;transform:translateY(-50%)}

.single-story-related .story-card h3{max-width:680px;margin:0 0 18px;font-family:var(--font-display);font-size:clamp(1.65rem,2.5vw,2.7rem);font-weight:750;line-height:1.08;letter-spacing:-.04em;color:var(--clhf-navy)}
.single-story-related .story-card p{max-width:620px;margin:0 0 22px;font-size:1rem;line-height:1.7;color:var(--clhf-muted)}

.single-story-related .story-card-more{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:.9rem;font-weight:800;color:var(--clhf-navy)}
.single-story-related .story-card-more b{font-size:1.25rem;font-weight:500;transition:transform .22s ease}

@media(hover:hover){
.single-story-related .story-card:hover .story-card-image img{transform:scale(1.025)}
.single-story-related .story-card:hover .story-card-more b{transform:translateX(5px)}
}

/* =========================================================
   TABLET
========================================================= */
@media(max-width:900px){
.single-story-hero-grid,.single-story-body-grid,.single-story-share-grid,.single-story-related-heading{grid-template-columns:150px 1fr;gap:36px}
.single-story-aside{position:static}
}

/* =========================================================
   MOBILE
========================================================= */
@media(max-width:700px){
.single-story-hero{padding:65px 0 70px}
.single-story-hero-grid,.single-story-body-grid,.single-story-share-grid,.single-story-related-heading{display:block}

.single-story-side{margin-bottom:22px;padding:0}
.single-story-category{font-size:1rem}

.single-story-meta{margin-bottom:22px}
.single-story-heading h1{font-size:clamp(3rem,13vw,4.7rem)}
.single-story-intro{font-size:1.08rem;line-height:1.68}

.single-story-featured{padding:18px 0}
.single-story-featured .container-wide::before{top:-75px;width:155px;height:155px}
.single-story-featured-inner{height:330px}

.single-story-body{padding:70px 0}
.single-story-aside{margin-bottom:28px;padding:0}
.single-story-content{font-size:1.03rem;line-height:1.78}
.single-story-content p{margin-bottom:25px}
.single-story-content h2{margin-top:55px;font-size:clamp(2.4rem,10vw,3.7rem)}
.single-story-content h3{margin-top:42px;font-size:clamp(1.7rem,8vw,2.5rem)}
.single-story-content blockquote{margin:45px 0;padding-left:24px;font-size:clamp(1.35rem,7vw,2rem)}

.single-story-share{padding-bottom:70px}
.single-story-share-inner{display:block}
.single-story-share-inner>span{display:block;margin-bottom:20px}
.single-story-share-links{gap:18px}

.single-story-related{padding:75px 0}
.single-story-related-heading{margin-bottom:45px}
.single-story-related-heading>span{display:block;margin-bottom:24px;padding:0}
.single-story-related-heading h2{font-size:clamp(2.6rem,11vw,4rem)}
.single-story-related-grid{grid-template-columns:1fr;gap:58px}
}

/* =========================================================
   SMALL PHONE
========================================================= */
@media(max-width:430px){
.single-story-hero{padding:55px 0 62px}
.single-story-heading h1{font-size:clamp(2.7rem,12.8vw,4rem)}
.single-story-intro{font-size:1rem}

.single-story-featured .container-wide::before{top:-64px;width:135px;height:135px}
.single-story-featured-inner{height:285px}

.single-story-body{padding:60px 0}
.single-story-content{font-size:.99rem;line-height:1.75}

.single-story-share-links{gap:15px}
.single-story-share-links a{font-size:.82rem}

.single-story-related{padding:65px 0}
}