/* V2 hero, full-viewport photo, overlaid nav, lead, and giant blend name.
   Height is controlled per-instance by an editor "Hero height" select
   (heightRatio attr) - one of the .h-* modifiers below always wins over
   this base rule; see skoc_v2_hero render.php for the "Auto" resolution
   (full height with an image/video, quarter height for the no-image
   gradient fallback). */
.v2-hero{position:relative;overflow:hidden;background:var(--v2-bg2);color:var(--v2-fg)}
.v2-hero.h-1-1{min-height:600px;height:100svh;max-height:940px}
.v2-hero.h-3-4{min-height:460px;height:75svh;max-height:720px}
.v2-hero.h-2-3{min-height:400px;height:66svh;max-height:626px}
.v2-hero.h-1-2{min-height:300px;height:50svh;max-height:470px}
.v2-hero.h-1-3{min-height:200px;height:33svh;max-height:313px}
.v2-hero.h-1-4{min-height:150px;height:25svh;max-height:235px}
/* is-default-bg: PHP-level gradient fallback (no image/video set on this
   page). The giant blended name lockup and lead copy are sized for a
   full-height hero moment, so at the shorter heights this variant normally
   runs at they'd just collide with the nav floating on top - hide them and
   let the colorful wash stand alone. */
.v2-hero.is-default-bg .hero-name,
.v2-hero.is-default-bg .hero-lead,
.v2-hero.is-default-bg .hero-top{display:none}
/* The full wash is tuned to darken toward the bottom/left for the giant name
   lockup and lead copy that this variant doesn't render - a light, even tint
   (just enough for the floating nav to read) keeps the gradient visible. */
.v2-hero.is-default-bg .wash{background:linear-gradient(180deg,rgba(15,19,25,0.4) 0%,rgba(15,19,25,0.16) 40%,rgba(15,19,25,0.5) 100%)}
.v2-hero .photo{position:absolute;inset:0;overflow:hidden}
.v2-hero .photo img{width:100%;height:100%;object-fit:cover;filter:saturate(0.82) contrast(1.05);object-position:center 30%;transform:scale(1);animation:v2h-kenburns 15s ease-out forwards}
/* default-gradient: no photo set anywhere in the theme for this state - soft,
   diffused color blobs (Amsterdam canal-house palette: brick, sky, water,
   warm light) at 35-42% opacity over the dark base, not a flat gray box. */
.v2-hero .photo.default-gradient{background:
	radial-gradient(55% 70% at 12% 18%,rgba(181,101,29,0.4),transparent 65%),
	radial-gradient(60% 75% at 88% 12%,rgba(124,140,160,0.42),transparent 65%),
	radial-gradient(70% 85% at 30% 102%,rgba(76,120,107,0.38),transparent 68%),
	radial-gradient(65% 80% at 95% 96%,rgba(199,151,90,0.35),transparent 66%),
	var(--v2-bg2)}

/* Mobile crop position: on narrow screens the same wide photo is cropped much
   narrower, so a horizontal photo can lose its subject off one edge. The
   editor's "Mobile crop position" focal-point picker sets --hero-focal-x per
   image (defaults to 50%/centered when never touched); desktop/tablet always
   stays centered regardless, only this breakpoint reads the variable. */
@media (max-width:767px){
	.v2-hero .photo img{object-position:var(--hero-focal-x,50%) 30%}
}

/* Ken Burns: slow one-way zoom-in on the hero photo only, so the overlaid
   nav/lead/name never moves. animation-duration is respected by the global
   prefers-reduced-motion rule in reset.css, which effectively freezes this. */
@keyframes v2h-kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
.v2-hero .hero-video{width:100%;height:100%;object-fit:cover;filter:saturate(0.82) contrast(1.05);object-position:center 30%}

/* Big sound-toggle badge, centered over the video. Two icon states (muted /
   unmuted) swapped via the .is-unmuted class, see the tay.js behavior that
   drives it. */
.v2-hero .hero-sound-toggle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:6;width:84px;height:84px;border-radius:999px;border:1.5px solid rgba(237,241,246,0.55);background:rgba(15,19,25,0.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--v2-fg);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,transform .15s}
.v2-hero .hero-sound-toggle:hover{background:rgba(15,19,25,0.55);transform:translate(-50%,-50%) scale(1.05)}
.v2-hero .hero-sound-toggle svg{width:34px;height:34px}
.v2-hero .hero-sound-toggle .ic-unmuted{display:none}
.v2-hero .hero-sound-toggle.is-unmuted .ic-muted{display:none}
.v2-hero .hero-sound-toggle.is-unmuted .ic-unmuted{display:block}
.v2-hero .wash{position:absolute;inset:0;background:linear-gradient(105deg,rgba(12,15,20,0.80) 0%,rgba(12,15,20,0.36) 42%,transparent 66%),radial-gradient(1000px 640px at 78% 8%,rgba(126,163,214,0.30),transparent 62%),radial-gradient(900px 700px at 12% 92%,rgba(47,109,181,0.42),transparent 60%),linear-gradient(180deg,rgba(15,19,25,0.42) 0%,rgba(15,19,25,0.10) 38%,rgba(15,19,25,0.86) 82%,#0F1319 100%)}
.v2-hero .hero-top{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:16px;padding:22px 20px}
.v2-hero .hero-top .wordmark{font-family:var(--f-display);font-weight:700;font-size:18px;letter-spacing:-0.01em;color:var(--v2-fg)}
.v2-hero .hero-top nav{display:none;gap:28px;margin-left:auto;font-size:14.5px;font-weight:500;color:rgba(237,241,246,0.82)}
.v2-hero .hero-top nav a:hover{color:#FFF}
.v2-hero .hero-top .cta{margin-left:auto;padding:11px 20px;font-size:14px}
.v2-hero .hero-lead{position:absolute;left:20px;right:20px;top:98px;z-index:4;max-width:640px}
.v2-hero .hero-lead h1{font-family:var(--f-display);font-weight:700;font-size:clamp(34px,7vw,60px);line-height:1.05;letter-spacing:-0.025em;text-shadow:0 2px 30px rgba(10,13,18,0.55)}
.v2-hero .hero-lead h1 .a{color:var(--v2-accent-soft)}
/* The lede carries the same accent as the h1 so a highlighted line can sit
   under the headline without inventing a second colour. */
.v2-hero .hero-lead p .a{color:var(--v2-accent-soft)}
.v2-hero .hero-lead p{margin:20px 0 26px;font-size:16px;line-height:1.62;color:rgba(237,241,246,0.88);max-width:540px;text-shadow:0 1px 18px rgba(10,13,18,0.6)}
.v2-hero .hero-lead .ctas{display:flex;gap:12px;flex-wrap:wrap}
.v2-hero .btn-cream{border:1.5px solid rgba(237,241,246,0.4);color:var(--v2-fg)}
.v2-hero .btn-cream:hover{background:rgba(237,241,246,0.1)}
.v2-hero .hero-name{position:absolute;left:0;right:0;bottom:22px;z-index:3;text-align:center;pointer-events:none}
.v2-hero .hero-name .l{display:block;font-family:var(--f-display);font-stretch:125%;font-weight:900;font-size:clamp(48px,13vw,164px);line-height:0.88;letter-spacing:0.005em;text-transform:uppercase;color:var(--v2-fg);mix-blend-mode:overlay;opacity:0.95}
.v2-hero .hero-name .l+.l{mix-blend-mode:normal;opacity:1;color:var(--v2-fg)}

/* Centered-statement lead layout, replaces the giant blend-mode name with the
   title/lede/CTAs, big and centered where the name used to sit. Opt in per
   block via the "Lead layout" control (leadLayout=centered). */
.v2-hero.lead-centered .hero-name{display:none}
.v2-hero.lead-centered .hero-lead{left:20px;right:20px;top:auto;bottom:36px;max-width:none;text-align:center}
.v2-hero.lead-centered .hero-lead h1{margin:0 auto;font-size:clamp(34px,9vw,84px)}
.v2-hero.lead-centered .hero-lead p{margin:18px auto 26px;max-width:520px}
.v2-hero.lead-centered .hero-lead .ctas{justify-content:center}

/* name-top: keeps the giant blend-mode name (unlike lead-centered, which
   hides it), stacked directly above the lead text as one group near the
   bottom of the hero, both centered, name on a single full-width line. */
.v2-hero.name-top{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;padding-bottom:40px}
.v2-hero.name-top .hero-name{position:relative;left:auto;right:auto;top:auto;bottom:auto;order:-1;display:flex;flex-wrap:nowrap;justify-content:center;margin-bottom:14px}
.v2-hero.name-top .hero-name .l{display:inline-block;font-size:clamp(20px,6vw,76px)}
.v2-hero.name-top .hero-name .l+.l{margin-left:0.22em}
.v2-hero.name-top .hero-lead{position:relative;left:auto;right:auto;top:auto;bottom:auto;order:1;max-width:none;text-align:center;margin-bottom:0}
.v2-hero.name-top .hero-lead h1{margin:0 auto;font-size:clamp(22px,3vw,34px);line-height:1.3;max-width:none}
.v2-hero.name-top .hero-lead p{margin:14px auto 24px;max-width:none;font-size:clamp(19px,2.75vw,31px)}
.v2-hero.name-top .hero-lead .ctas{justify-content:center}

/* Entrance, nav bar drops in, lead + name rise in staggered, on first paint only. */
.v2-hero .hero-top{animation:v2h-drop .7s cubic-bezier(.16,.8,.3,1) both}
.v2-hero .hero-lead{animation:v2h-rise .8s cubic-bezier(.16,.8,.3,1) .12s both}
.v2-hero .hero-name .l{animation:v2h-rise .9s cubic-bezier(.16,.8,.3,1) both}
.v2-hero .hero-name .l:nth-child(1){animation-delay:.22s}
.v2-hero .hero-name .l:nth-child(2){animation-delay:.32s}
@keyframes v2h-drop{from{opacity:0;transform:translateY(-14px)}}
@keyframes v2h-rise{from{opacity:0;transform:translateY(28px)}}

/* Post hero (skoc/post-hero). Unlike a page hero, the title here is whatever the
   post is called - the ITTI open letter's is 111 characters - so the page-hero
   type scale (up to 84px) overflows the top of a half-height hero and disappears
   under the floating nav. Scale post titles down, clamp both title and excerpt to
   a fixed number of lines, and reserve room for the nav so nothing collides. */
/* Specificity note: .v2-hero.lead-centered .hero-lead (0,3,0) sets top:auto,
   so this must match it or the title keeps growing past the hero's top edge
   and slides under the floating nav. */
.v2-hero.wp-block-skoc-post-hero .hero-lead{top:92px;bottom:28px;display:flex;flex-direction:column;justify-content:center}
.v2-hero.wp-block-skoc-post-hero .hero-lead h1{
	font-size:clamp(24px,3.4vw,44px);line-height:1.1;
	display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.v2-hero.wp-block-skoc-post-hero .hero-lead p{
	margin:14px auto 0;font-size:15px;max-width:620px;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Mobile: the centred lead sat 36px off the bottom with a 9vw headline, which
   put four lines of type hard against the screen edge. Lift it clear and pull
   the type down a step so the hero reads as a composition rather than a
   caption jammed at the foot of a photo. */
@media (max-width:767px){
	.v2-hero.lead-centered .hero-lead{bottom:64px;left:22px;right:22px}
	.v2-hero.lead-centered .hero-lead h1{font-size:clamp(26px,7.2vw,40px);line-height:1.12}
	.v2-hero.lead-centered .hero-lead p{font-size:15px;margin:14px 0 0}
	.v2-hero.h-1-1{height:88svh;min-height:520px}
}