/* ==========================================================================
cp-hero.css — the Creek & Paddle page hero component
--------------------------------------------------------------------------
Extracted from the 26 Famous Profiles pages, which each carried an inline
copy. Any page can now use it with three lines of markup and one image.
USAGE
-----
...
...
REQUIREMENTS
------------
1. The page must define --accent (and ideally --accent-raw) in :root.
--accent is the TYPE colour and must clear roughly 0.55 luminance or it
will be unreadable on near-black. --accent-raw keeps the true brand hex
for fills and rules.
2. Art must be 1200x630 with the subject in the RIGHT third or along the
BOTTOM edge, and the LEFT 55% / TOP 40% left as quiet negative space.
The frame is never cropped, so a subject placed centre-left will collide
with the type.
3. needs class="pp-main" so its top padding accounts for the hero.
WHY IT IS BUILT THIS WAY
------------------------
The first version used background-size:cover on a short band. A ~3.3:1 band
against 1.91:1 art scales to fill the width and crops the height, throwing
away exactly the lower-right third the art was composed around. This version
locks aspect-ratio to the source so the whole frame always shows.
Desktop overlays the type on the reserved negative space. The inner column is
max-width:720px with auto margins, and is also 720px centred, so the
two left edges align at every viewport width.
Mobile stacks instead of overlaying: at 390px the frame is only ~205px tall,
where overlaid type would be both unreadable and sitting on the picture.
========================================================================== */
.pp-hero{background:var(--navy-deep);padding:84px 0 0;}
.pp-hero-frame{position:relative;max-width:1120px;margin:0 auto;}
.pp-hero-img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;background:#0a1a26;}
.pp-hero-rule{height:3px;background:var(--accent);max-width:1120px;margin:0 auto;}
/* type styles the hero needs. Harmless on pages that also use them in body. */
.pp-back{display:inline-block;font-size:12px;letter-spacing:.05em;color:rgba(255,255,255,.5);text-decoration:none;margin-bottom:22px;}
.pp-back:hover{color:var(--copper-lt);}
.pp-eyebrow{font-family:'Cinzel',serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;}
.pp-title{font-family:'Cormorant Garamond',serif;font-size:clamp(46px,9vw,84px);font-weight:300;line-height:1.0;letter-spacing:-.02em;margin-bottom:10px;}
.pp-tagline{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(18px,3vw,24px);color:var(--accent);margin-bottom:26px;line-height:1.4;}
.pp-hero-copy .pp-back{display:inline-block;margin-bottom:14px;}
.pp-hero-copy .pp-title{margin-bottom:8px;}
.pp-hero-copy .pp-tagline{margin-bottom:0;}
main.pp-main{padding-top:32px;}
/* desktop: type sits over the reserved negative space, art stays whole */
@media(min-width:761px){
.pp-hero-frame::after{content:'';position:absolute;inset:0;pointer-events:none;
background:linear-gradient(100deg,rgba(6,20,32,.97) 0%,rgba(6,20,32,.94) 36%,rgba(6,20,32,.78) 58%,rgba(6,20,32,.34) 78%,rgba(6,20,32,.04) 95%,rgba(6,20,32,0) 100%);}
.pp-hero-copy{position:absolute;z-index:2;inset:0;display:flex;align-items:center;}
.pp-hero-copy-inner{width:100%;max-width:720px;margin:0 auto;padding:0 20px;}
.pp-hero-copy .pp-title{max-width:12ch;text-shadow:0 2px 34px rgba(6,20,32,.95),0 1px 3px rgba(6,20,32,.8);}
.pp-hero-copy .pp-tagline,.pp-hero-copy .pp-eyebrow,.pp-hero-copy .pp-back{text-shadow:0 1px 12px rgba(6,20,32,.95);}
.pp-hero-copy .pp-tagline{max-width:26ch;}
}
/* mobile: stack. nothing is cropped and nothing sits on top of the art */
@media(max-width:760px){
.pp-hero{padding-top:76px;}
.pp-hero-copy-inner{max-width:720px;margin:0 auto;padding:22px 20px 0;}
.pp-hero-copy .pp-title{font-size:clamp(38px,10.5vw,58px);}
main.pp-main{padding-top:24px;}
}
/* ==========================================================================
.cp-arthero — art BEHIND a page's existing hero, title overlaid.
The first attempt stacked an image band above the title block. It read as
two separate objects fighting for the top of the page. This instead paints
the artwork behind the page's own hero, so the title sits on it the way it
does on the Famous Profiles pages.
No markup surgery: add the class and one custom property to whatever element
already holds the eyebrow + h1.
::before is the art, ::after the scrim; both are anchored to the TOP of the
element and sized by aspect-ratio, so a long gets art only across its
first screenful. isolation:isolate lets them sit at negative z-index —
behind the content, in front of the element's own background.
The art bleeds to 1120px regardless of how narrow the content column is,
matching the Famous Profiles frame width.
========================================================================== */
.cp-arthero{position:relative;isolation:isolate;
padding-top:clamp(150px,17vw,230px) !important;}
.cp-arthero::before,
.cp-arthero::after{content:'';position:absolute;top:0;left:50%;
transform:translateX(-50%);width:min(1120px,100vw);aspect-ratio:1200/630;
pointer-events:none;}
.cp-arthero::before{background-image:var(--art);background-size:cover;
background-position:center;background-repeat:no-repeat;z-index:-2;}
.cp-arthero::after{z-index:-1;background:
linear-gradient(to bottom,rgba(6,20,32,.62) 0%,rgba(6,20,32,.34) 20%,rgba(6,20,32,.52) 58%,rgba(6,20,32,.90) 86%,var(--navy-deep,#061420) 100%),
linear-gradient(to right,rgba(6,20,32,.34) 0%,rgba(6,20,32,.16) 45%,rgba(6,20,32,.30) 100%);}
.cp-arthero > *{position:relative;}
/* these page titles are centre-aligned, unlike the left-aligned profile pages,
so the scrim above is uniform rather than weighted to one side. Shadows do
the rest of the work on the brighter frames. */
.cp-arthero h1,
.cp-arthero .hero-title,
.cp-arthero .page-title,
.cp-arthero .hook-question,
.cp-arthero .masthead-title{text-shadow:0 2px 30px rgba(6,20,32,.92),0 1px 4px rgba(6,20,32,.7);}
.cp-arthero .page-eyebrow,
.cp-arthero .hero-eyebrow,
.cp-arthero .hook-eyebrow,
.cp-arthero .fp-eyebrow,
.cp-arthero .masthead-eyebrow,
.cp-arthero .confirm-eyebrow{text-shadow:0 1px 10px rgba(6,20,32,.9);}
/* mobile: the frame is only ~205px tall at 390px wide, so overlaid type would
be unreadable and would cover the art. Stack instead — art on top, title
beneath — exactly as the Famous Profiles pages do. */
@media(max-width:760px){
.cp-arthero{padding-top:calc(52.5vw + 26px) !important;}
.cp-arthero::before,
.cp-arthero::after{width:100vw;}
.cp-arthero::after{background:
linear-gradient(to bottom,rgba(6,20,32,.34) 0%,rgba(6,20,32,0) 40%,rgba(6,20,32,.42) 88%,var(--navy-deep,#061420) 100%);}
}
/* --- section divider band ------------------------------------------------ */
.cp-divider{max-width:1120px;margin:52px auto;height:clamp(64px,9vw,132px);overflow:hidden;
border-top:.5px solid rgba(184,115,51,.2);border-bottom:.5px solid rgba(184,115,51,.2);}
.cp-divider img{display:block;width:100%;height:100%;object-fit:cover;opacity:.85;}
