/* English SEO subpages (tools/seo_pages.py, 06.11.2026). Tokens and shared components live in style.css; only the page's own layouts are here. */
.fp-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);min-height:min(100svh,1000px);background:var(--about)}
.fp-hero-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:128px 64px 64px max(64px,calc((100vw - 1312px)/2));animation:hero-arrive .8s var(--ease) both}
.fp-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;font-size:12px;line-height:1.5;color:var(--muted);margin-bottom:22px}
.fp-crumbs a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-decoration-color:#c9ccbd;text-underline-offset:4px}
.fp-hero h1{font-size:clamp(60px,6.5vw,104px);line-height:.98;letter-spacing:-.045em}
.fp-hero h1 em{font-style:italic;color:var(--olive)}
.fp-lead{max-width:470px;color:var(--muted);margin:28px 0 30px;text-wrap:pretty}
.fp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
/* the photo fades into the page colour under the header, the same device as the photo in her about section */
.fp-hero-photo{position:relative;overflow:hidden;background:var(--about);min-height:100%}
.fp-hero-photo picture{position:absolute;inset:0}
.fp-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 48px,#000 170px);mask-image:linear-gradient(180deg,transparent 0,transparent 48px,#000 170px)}

.fp-story-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px 72px;align-items:center}
.fp-quote p{font:italic 400 clamp(23px,2vw,29px)/1.42 var(--serif);color:#4a5042;margin-top:26px;text-wrap:pretty}
.fp-quote footer{margin-top:14px;font-size:12px;color:var(--muted);letter-spacing:.02em}
.fp-story-photo picture{background:var(--card)}
.fp-story-photo figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px}
.fp-series{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:13px;line-height:1.4;color:var(--ink);border-bottom:1px solid transparent}
.fp-series svg{width:16px;height:16px}
@media(hover:hover){.fp-series:hover{border-color:#c9ccbd}}
.fp-me{grid-column:2;display:grid;grid-template-columns:150px minmax(0,1fr);gap:28px;align-items:center;max-width:620px}
.fp-me picture{aspect-ratio:4/5;overflow:hidden;background:var(--blush)}
.fp-me img{height:100%;object-fit:cover}
.fp-me p{color:var(--muted)}
.fp-me .text-link{margin-top:10px}

.fp-photos{padding-bottom:40px;content-visibility:auto;contain-intrinsic-size:auto 2960px} /* its photos are not requested until the reader comes close; sizes measured 06.11 so anchors land right */
.fp-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:36px 24px;grid-auto-flow:dense;align-items:start}
.fp-shot{grid-column:span 2}
.fp-shot.wide{grid-column:span 4}
.fp-shot>a{display:block;background:var(--card);overflow:hidden;cursor:zoom-in}
.fp-shot img{transition:transform .5s var(--ease)}
@media(hover:hover){.fp-shot>a:hover img{transform:scale(1.02)}}
.fp-shot figcaption{margin-top:4px}
.fp-more{margin-top:28px}

@media(max-width:1100px){
 .fp-hero-copy{padding-inline:40px 32px}
 .fp-story-grid{gap:48px 44px}
 .fp-me{grid-column:1/-1;max-width:640px}
 .fp-photos{contain-intrinsic-size:auto 230vw}
}
@media(max-width:900px){
 .fp-hero{grid-template-columns:minmax(0,1fr);min-height:0}
 .fp-hero-copy{padding:92px 40px 28px}
 .fp-hero-photo{min-height:0;aspect-ratio:1/1}
 .fp-hero-photo img{object-position:50% 45%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%);mask-image:linear-gradient(180deg,transparent 0,#000 14%)}
 .fp-story-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:700px){
 .fp-hero-copy{padding:84px 20px 22px}
 .fp-crumbs{margin-bottom:2px}
 .fp-hero h1{font-size:clamp(42px,12.7vw,76px);line-height:1}
 .fp-lead{margin:16px 0 20px}
 .fp-actions{width:100%}
 .fp-actions .button{flex:1 1 100%}
 .fp-actions .text-link{display:none}
 .fp-hero-photo{aspect-ratio:4/5}
 .fp-me{grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:start}
 .fp-photos{padding-bottom:20px;contain-intrinsic-size:auto 546vw}
 .fp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
 .fp-shot{grid-column:span 1}
 .fp-shot.wide{grid-column:1/-1}
 .fp-series{font-size:12px;gap:6px}
 .fp-series svg{width:14px;height:14px;flex:none}
}
@media(max-width:370px){.fp-actions .button{padding-inline:18px;gap:10px}.fp-actions .button svg:last-child{display:none}}

/* contrast on this page: the header language link and the step numbers (the main page keeps its own values) */
.language a{opacity:.82}
.step-no{color:var(--olive)}
/* portrait photos in the viewer stay inside the screen: the percentage max-height of style.css does not resolve in the dialog grid (the main page has the same bug, noted in ~/work/vitalia-seo/audit.md) */
.lightbox-figure{height:calc(100vh - 150px);height:calc(100dvh - 150px)}
.lightbox-figure img{max-height:calc(100vh - 190px);max-height:calc(100dvh - 190px)}
@media(max-width:700px){
 .lightbox-figure{height:calc(100vh - 170px);height:calc(100dvh - 170px)}
 .lightbox-figure img{max-height:calc(100vh - 210px);max-height:calc(100dvh - 210px)}
}