/* The hero, styled only here: the title sits above artwork whose inner edges overlap its sides. */
/* The hero takes the frog taps (frog-blink.js): no grey tap flash over all of it on iOS.
   Its text can't be marked and shows no text cursor; links and buttons keep the pointer. */
.hero{background:linear-gradient(90deg,var(--turquoise) 50%,var(--cream) 50%);overflow:hidden;-webkit-tap-highlight-color:transparent;cursor:default;-webkit-user-select:none;user-select:none}
.hero-inner{position:relative;margin:0 auto;display:flex;align-items:center;justify-content:center;max-width:1540px;min-height:0;padding:26px 0 28px;isolation:isolate}
.hero-copy{position:relative;z-index:2;grid-column:auto;grid-row:auto;width:58%;max-width:none;min-width:0;margin:0;text-align:center}
.hero-author{font:400 clamp(29px,3.8vw,54px)/1.15 var(--poster);color:var(--red);margin:0 0 -3px}
/* Red on turquoise is 2.36:1, so the author line gets a cream backdrop (5.31:1) and focus rings in the hero are ink (6.42:1 on turquoise). */
.hero .hero-copy .hero-author{width:max-content;max-width:100%;margin-left:auto;margin-right:auto;padding:0 .15em;background:var(--cream)}
.hero a:focus-visible,.hero button:focus-visible{outline-color:var(--ink)}
.hero h1{display:flex;flex-direction:column;gap:0;max-width:none;margin:0;font:400 clamp(108px,13.5vw,208px)/1.085 var(--poster);letter-spacing:-.015em;overflow:visible}
.hero h1 span{display:block;position:relative;padding:0;line-height:1.085;white-space:nowrap;transform:none;transform-origin:center;-webkit-text-stroke:0}
.hero h1 span:first-child{font-size:1em;line-height:1.085;transform:scaleX(1.08)}
.hero h1 span:first-child:after{content:none}
/* The word has an opaque split-colour backdrop aligned with the stage; no outline. */
.hero h1 span:nth-child(2){align-self:center;width:max-content;padding-inline:.04em;background:linear-gradient(90deg,var(--turquoise) 50%,var(--cream) 50%);border:0;box-shadow:none;-webkit-text-stroke:0;paint-order:normal}
.hero-subtitle{font:400 clamp(30px,3.4vw,50px)/1.1 var(--poster);letter-spacing:.08em;padding-left:.08em;text-transform:uppercase;white-space:nowrap;margin:.1em 0 0}
.hero-tagline{position:relative;z-index:3;background:linear-gradient(90deg,var(--turquoise) 50%,var(--cream) 50%);color:var(--ink);font-size:clamp(15px,1.35vw,19px);font-weight:600;line-height:1.5;max-width:610px;margin:17px auto 19px;padding:10px 16px;overflow-wrap:break-word}
.hero-actions{display:flex;align-items:center;flex-direction:column;justify-content:center;gap:9px;flex-wrap:nowrap}
.hero-actions .button{font-size:clamp(18px,1.65vw,24px);min-height:52px;padding:12px 38px}
.hero-actions .text-link{font-size:16px;min-height:32px}
.frog-half{position:absolute;z-index:1;top:12px;bottom:12px;width:35.5%;height:auto;grid-column:auto;grid-row:auto;overflow:hidden;pointer-events:none;display:block}
.frog-left{left:0;right:auto}.frog-right{left:auto;right:0}
.frog-half img{position:absolute;top:0;width:200%;height:100%;max-width:none;object-fit:contain}
.frog-left img{left:0}.frog-right img{left:-100%}
/* Eye overlays. .frog-art is a copy of the img box (a size container); .frog-stage inside it is the
   rectangle object-fit:contain paints the artwork into (centred; at <=720 px object-position 16 %), so
   the eyes can sit at fixed % of the artwork. The img itself is untouched, so the frog never moves.
   Eye centres (517,96) and (797,96) of 1316x1195, ring 120 px. Each half carries both eyes; the
   clipped one is simply invisible. */
.frog-art{position:absolute;top:0;left:0;width:200%;height:100%;container-type:size;pointer-events:none}
.frog-right .frog-art{left:-100%}
.frog-stage{--stage-w:min(100cqw,calc(100cqh * 1316 / 1195));--stage-y:.5;position:absolute;left:calc((100cqw - var(--stage-w)) / 2);top:calc((100cqh - var(--stage-w) * 1195 / 1316) * var(--stage-y));width:var(--stage-w);height:calc(var(--stage-w) * 1195 / 1316)}
.frog-mobile{display:none}
/* Blink (frog-blink.js adds .blink-left / .blink-right for 340 ms; .eye-left is the eye shown in the
   left half, the colourful frog, at every width): a lid in the head colour slides down over each eye
   ring and back up, clipped to the ring. Open, the lid sits fully outside its circle. Transform only.
   The keyframes (frog-blink) are in style.css: the header wordmark's eye blinks with them too. */
.frog-eye{position:absolute;top:3%;width:9.3%;aspect-ratio:1;border-radius:50%;overflow:hidden;pointer-events:none}
.frog-eye.eye-left{left:34.64%}.frog-eye.eye-right{left:55.91%}
.frog-lid{position:absolute;inset:-2%;border-radius:50%;transform:translateY(calc((var(--lid,0) - 1) * 103%))}
.eye-left .frog-lid{background:radial-gradient(circle at 50% 35%,#0b4b49,#013938 72%)}
.eye-right .frog-lid{background:radial-gradient(circle at 50% 35%,#1a1a1a,#080808 72%)}
.hero.blink-left .eye-left .frog-lid,.hero.blink-right .eye-right .frog-lid{animation:frog-blink .34s cubic-bezier(.45,0,.2,1) both}
/* Settle on load: the halves slide 12 px in from the edges (the first blink follows 150 ms later). */
.hero .frog-left{animation:frog-settle-left .5s cubic-bezier(.2,.7,.2,1) both}
.hero .frog-right{animation:frog-settle-right .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes frog-settle-left{from{translate:-12px 0}}
@keyframes frog-settle-right{from{translate:12px 0}}

html:lang(el) .hero h1{font:400 clamp(108px,13.5vw,208px)/.96 var(--poster);letter-spacing:-.015em}
html:lang(el) .hero h1 span,html:lang(el) .hero h1 span:first-child{font-size:1em;line-height:.96;transform:none;-webkit-text-stroke:0}
html:lang(el) .hero h1 span:nth-child(2){-webkit-text-stroke:0;paint-order:normal}

html:lang(el) .hero-inner{min-height:0}
@media(min-width:1540px){.hero-author{font-size:54px}.hero h1{font-size:208px}.hero-subtitle{font-size:50px}}
@media(min-width:721px) and (max-width:1000px){.hero-inner{padding-top:22px;padding-bottom:24px}.hero-copy{width:62%}.hero-author{font-size:35px}.hero-tagline{font-size:15px;max-width:450px;margin:13px auto 16px}.hero-actions .button{padding:11px 29px;font-size:18px}.hero-actions .text-link{font-size:15px}.hero-subtitle{font-size:33px}.hero-actions{gap:5px}}
@media(max-width:720px){
 .hero-inner{display:flex;padding:26px 12px 29px;min-height:0;max-width:none}.hero-copy{width:100%;max-width:590px;margin:0 auto}.hero-author{font-size:clamp(27px,5.7vw,39px);margin-bottom:0}
 html:lang(de) .hero h1{font:400 clamp(82px,17.2vw,124px)/1.085 var(--poster);letter-spacing:-.015em;gap:0}
 html:lang(de) .hero h1 span{line-height:1.085;transform:none;-webkit-text-stroke:0}
 html:lang(de) .hero h1 span:first-child{font-size:1em;line-height:1.085;transform:scaleX(1.08)}
 html:lang(de) .hero h1 span:nth-child(2){-webkit-text-stroke:0;paint-order:normal}
 .frog-half{display:block;top:19px;bottom:112px;width:33%;height:auto}.frog-half img{object-fit:contain;object-position:center 16%}.frog-stage{--stage-y:.16}.frog-mobile{display:none}
 /* No backdrop on phones: the subtitle is sized to sit in the open gap between the frogs' lower feet, just below their innermost toes. The nudge is a relative offset, so the layout (and with it the frogs' box) stays as it was; the left pad carries the trailing letter-spacing. */
 .hero-subtitle{font-size:clamp(24px,5.6vw,34px);letter-spacing:.04em;padding-left:.04em;margin-top:.1em;position:relative;top:.55em}
 .hero-tagline{max-width:90%;font-size:15px;line-height:1.45;margin:18px auto;padding:10px 12px}.hero-actions{flex-direction:column;gap:8px}.hero-actions .button{font-size:18px;min-height:53px;padding:12px 29px}.hero-actions .text-link{font-size:15px;min-height:33px}
 html:lang(el) .hero-inner{min-height:0;padding-top:30px;padding-bottom:30px}
 html:lang(el) .hero h1{font-size:clamp(82px,17.2vw,124px);line-height:.96;letter-spacing:-.015em}
 html:lang(el) .hero h1 span,html:lang(el) .hero h1 span:first-child{font-size:1em;line-height:.96;transform:none}
 
 html:lang(el) .frog-half{bottom:105px;width:31%}
}
@media(width<=820px){.hero-actions .text-link{min-height:44px}}
@media(prefers-reduced-motion:reduce){.hero *{scroll-behavior:auto}}
/* Greek kicker: the poster face has only a few Greek capitals, so the word would be drawn glyph by glyph from other fonts. */
html:lang(el) .hero-author{font-family:var(--title);font-weight:900}