/* The reference's image silhouette, adapted as semantic HTML and a static SVG clip.
   No React/Tailwind runtime is needed; this can become a WordPress template part. */
.hero-editorial{min-height:0;isolation:auto;z-index:2;padding-block:24px 0}
.hero-composition{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.hero-topline{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;min-width:0}
.hero-label{display:flex;align-items:center;gap:9px;font-size:.8125rem;font-weight:600;line-height:1.4;white-space:nowrap;color:var(--page-text)}
.hero-label-divider{padding-inline:4px;color:var(--page-muted);font-weight:400}
.hero-asterisk{font-family:Arial,sans-serif;font-size:27px;line-height:1;color:var(--blue);flex-shrink:0}
.hero-brand-icon{width:24px;height:24px;object-fit:contain;flex-shrink:0}
.hero-editorial .typebar{width:10.875rem;max-width:100%;flex-shrink:0;gap:8px;padding:0 0 0 10px;background:transparent;border-color:var(--page-line);border-radius:2px}
.hero-editorial .typebar-domain{font-size:1rem;font-weight:500;letter-spacing:0}
.hero-editorial .type-enter{width:44px;height:44px;min-width:44px;min-height:44px;font-size:20px;border-radius:0;outline-offset:4px}
.hero-media{position:relative;aspect-ratio:1.25;min-width:0}
.hero-clip-defs{position:absolute;pointer-events:none}
.hero-editorial .hero-photo{position:absolute;inset:0;width:100%;height:100%;z-index:auto;clip-path:url(#sparkcode-hero-cutout);overflow:hidden;background:var(--page-field)}
.hero-editorial .hero-photo img{object-fit:cover;object-position:64% 15%;width:100%;height:100%;position:absolute;inset:0}
.hero-editorial h1{font-size:clamp(2.375rem,8.5vw,3.5rem);line-height:1.12;letter-spacing:var(--tracking-heading);font-weight:600;min-width:0;max-width:100%;margin-top:-4px}
.hero-heading-line{display:block;overflow:clip;padding-bottom:.08em;margin-bottom:-.08em}
.hero-heading-line>span{display:block}
.hero-editorial .hero-support{font-size:1rem;line-height:1.65;max-width:42ch;text-align:left;margin:0}
.hero-editorial + .intro{padding-top:40px}
@media(max-width:379px){
 .hero-label{font-size:.75rem;gap:6px}
 .hero-label-divider{padding-inline:2px}
 .hero-editorial .typebar{width:9.875rem;padding-left:8px}
 .hero-editorial .typebar-domain{font-size:.9375rem}
}
@media(min-width:768px){
 .hero-editorial{padding-top:32px}
 .hero-composition{display:flow-root}
 .hero-topline{position:absolute;left:var(--gutter);right:calc(var(--gutter) + (100% - 2 * var(--gutter)) * .16);top:0;height:calc((100vw - 2 * var(--gutter)) * .4 * .1385);max-height:74px;z-index:1;padding-bottom:8px}
 .hero-label{font-size:.9375rem;gap:12px}
 .hero-editorial .typebar{width:13.75rem}
 .hero-editorial .typebar-domain{font-size:1.0625rem}
 .hero-media{aspect-ratio:2.5}
 .hero-editorial .hero-photo img{object-position:50% 10%}
 .hero-editorial h1{position:relative;float:right;width:20.5%;margin:calc(min(var(--content),100vw - 2 * var(--gutter)) * -.1064 + 20px) 0 0;font-size:clamp(1.625rem,2.6vw,2.375rem);line-height:1.13}
 .hero-editorial .hero-support{clear:both;padding-top:20px;font-size:1rem;max-width:none}
 .hero-editorial + .intro{padding-top:40px}
}
@media(min-width:1024px){.hero-editorial + .intro{padding-top:48px}.hero-topline{padding-bottom:12px}}
/* At text zoom, keep copy out of the image silhouette and let everything reflow. */
@media(min-width:768px) and (max-width:62rem){
 .hero-editorial h1{position:static;float:none;width:auto;margin-top:20px;max-width:24ch;font-size:clamp(2rem,4vw,2.5rem)}
 .hero-editorial .hero-heading-line{display:inline}
 .hero-editorial .hero-heading-line>span{display:inline}
 .hero-heading-line+.hero-heading-line::before{content:' '}
}
@media(prefers-reduced-motion:no-preference){
 @keyframes hero-photo-arrive{from{opacity:.12}to{opacity:1}}
 @keyframes hero-line-arrive{from{opacity:.18;transform:translateY(90%)}to{opacity:1;transform:none}}
 .page-arrival .hero-editorial .hero-photo{animation:hero-photo-arrive var(--hero-photo-duration) var(--ease) var(--hero-photo-delay) both}
 .page-arrival .hero-topline{animation:arrival-detail var(--arrival-copy) var(--ease) var(--hero-topline-delay) both}
 .page-arrival .hero-heading-line>span{animation:hero-line-arrive var(--hero-title-duration) var(--ease) var(--hero-title-delay) both}
 .page-arrival .hero-heading-line:nth-child(2)>span{animation-delay:calc(var(--hero-title-delay) + var(--hero-line-stagger))}
 .page-arrival .hero-editorial .hero-support{animation:arrival-detail var(--arrival-copy) var(--ease) var(--arrival-copy-delay) both}
}
@media(prefers-reduced-motion:reduce){.hero-heading-line{overflow:visible}.hero-editorial .type-enter.enter-feedback{transform:none}}

@media(min-width:768px) and (max-width:1023px){
 .hero-topline{position:static;height:auto;max-height:none;padding-bottom:16px}
 .hero-editorial h1{position:static;float:none;width:auto;font-size:2.5rem;line-height:1.15;margin-top:20px;max-width:100%}
}