@font-face { font-family:Lato; font-weight:300; font-style:normal; font-display:swap; src:url('brand/lato-300.ttf') format('truetype'); }
@font-face { font-family:Lato; font-weight:400; font-style:normal; font-display:swap; src:url('brand/lato-400.ttf') format('truetype'); }
@font-face { font-family:Lato; font-weight:700; font-style:normal; font-display:swap; src:url('brand/lato-700.ttf') format('truetype'); }
:root { color-scheme:light; --accent:#068587; --heading:#333; --text:#505050; --line:#e7e7e7; }
* { box-sizing:border-box; }
body { margin:0; background:#fff; color:var(--text); font-family:Lato,Verdana,Geneva,sans-serif; }
.screen { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
header { padding:20px 4vw; border-bottom:1px solid var(--line); background:#fff; }
.brand-link { flex-shrink:0; }
.brand-logo { display:block; width:clamp(175px,16vw,280px); height:auto; max-height:100px; object-fit:contain; }
.presentation-label { margin-right:auto; padding-left:2vw; }
.eyebrow { color:var(--accent); letter-spacing:.13em; text-transform:uppercase; font-size:clamp(14px,1vw,19px); font-weight:700; }
.brand { color:var(--heading); font-size:clamp(20px,1.65vw,32px); font-weight:300; }
.topic { font-size:clamp(15px,1.15vw,22px); color:#fff; background:var(--accent); padding:16px 22px; max-width:32ch; }
main { flex:1; display:flex; align-items:center; padding:28px 4vw; }
article { width:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:center; gap:5vw; }
article.text-only { display:block; max-width:1300px; margin:auto; }
article.text-only .story { max-width:55ch; }
figure { margin:0; height:calc(100dvh - 260px); min-height:320px; text-align:center; background:#f7f7f7; padding:12px; border:1px solid var(--line); }
figure img { width:100%; height:100%; object-fit:contain; }
.part { color:var(--accent); font-size:clamp(16px,1.2vw,24px); margin-bottom:1.2rem; }
h1 { color:var(--heading); font-family:Lato,Verdana,Geneva,sans-serif; font-weight:300; font-size:clamp(34px,3.3vw,66px); line-height:1.15; margin:0 0 1.5rem; }
h1::after { content:''; display:block; width:64px; height:3px; background:var(--accent); margin-top:24px; }
.story { font-size:clamp(22px,1.85vw,37px); line-height:1.5; margin:0; }
footer { padding:14px 4vw 20px; color:#666; border-top:1px solid var(--line); background:#f9f9f9; }
footer a { color:#555; font-size:14px; text-decoration:none; }
footer a:hover { color:var(--accent); text-decoration:underline; }
.controls { transition:opacity .3s; }
body.idle .controls { opacity:0; pointer-events:none; }
.controls:focus-within { opacity:1!important; pointer-events:auto!important; }
.controls .btn { font-size:16px; border-radius:0; --bs-btn-color:#057375; --bs-btn-border-color:#068587; --bs-btn-hover-bg:#068587; --bs-btn-hover-color:#fff; --bs-btn-hover-border-color:#068587; --bs-btn-active-bg:#056c6e; --bs-btn-active-color:#fff; --bs-btn-active-border-color:#056c6e; }
.form-select { max-width:250px; background-color:#fff; color:#333; border-color:#b6caca; border-radius:0; }
a:focus-visible,button:focus-visible,select:focus-visible { outline:3px solid #068587; outline-offset:4px; }
.track { height:4px; background:#e4eeee; }
.fill { height:100%; width:0; background:var(--accent); }
#counter { color:var(--accent); font-variant-numeric:tabular-nums; font-size:16px; white-space:nowrap; }
#image-error { color:#a12a20; }
@media(max-width:800px), (orientation:portrait) {
 header { padding:16px 24px; } main { padding:24px; } footer { padding:20px 24px; }
 .presentation-label { padding-left:0; } .topic { max-width:none; padding:10px 16px; }
 article { grid-template-columns:1fr; gap:24px; } figure { height:44vh; min-height:230px; }
 h1 { font-size:34px; margin-bottom:16px; } .story { font-size:22px; }
}
@media(max-height:650px) and (min-width:801px) {
 header { padding:10px 4vw; } .brand-logo { max-height:65px; } main { padding:20px 4vw; } figure { height:62vh; min-height:240px; }
 h1 { font-size:32px; } h1::after { margin-top:14px; } .story { font-size:21px; } footer { padding:12px 4vw; }
}
@media(prefers-reduced-motion:reduce) { * { transition:none!important; } }