/* Sylphy one-page photographic layout, adapted for the Battlegroup 2027 teaser. */
:root {
 --background:#FBF7F2; --surface:#FFFFFF; --text-primary:#3A342E; --text-secondary:#8A8178;
 --accent:#E07856; --accent-secondary:#7BA88F; --border:#EDE6DD;
 --font-heading:"Fraunces"; --font-body:"Source Sans 3";
 --text-14:14px; --text-15:15px; --text-16:16px; --text-22:22px; --text-56:56px;
 --space-8:8px; --space-16:16px; --space-22:22px; --space-34:34px; --space-56:56px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:34px}
body.bg27-teaser{margin:0;background:var(--background);color:var(--text-primary);font:400 16px/1.7 var(--font-body);overflow-x:clip}
:where(.bg27-teaser) section{background:transparent;overflow:visible;z-index:auto}
.bg27-teaser :is(h1,h2,h3,h4){font-family:var(--font-heading);font-weight:600;line-height:1.7;letter-spacing:-.025em;color:inherit;margin:0 0 22px;text-wrap:balance}
.bg27-teaser :is(h1,h2){font-size:56px}
.bg27-teaser :is(h3,h4){font-size:22px}
.bg27-teaser p{font:inherit;line-height:1.7;letter-spacing:0;color:inherit;margin:0 0 22px}
.bg27-teaser a,.bg27-teaser a:visited{color:inherit;text-decoration:none;transition:none}
.bg27-teaser a:hover{color:inherit}
.bg27-teaser img{max-width:100%;height:auto;display:block;border:0}
.bg27-teaser button{font:600 16px/1.7 var(--font-body);color:var(--text-primary);cursor:pointer}
.bg27-teaser :is(a,button,summary):focus-visible{outline:3px solid var(--text-primary);outline-offset:5px}
.bg27-teaser ::selection{background:var(--accent-secondary);color:var(--text-primary)}
.teaser-wrap{width:min(1240px,calc(100% - 112px));margin-inline:auto}
.teaser-skip{position:fixed;left:16px;top:-100px;padding:16px 22px;border-radius:16px;background:var(--background);z-index:100}
.teaser-skip:focus{top:16px}
.teaser-header{display:flex;justify-content:space-between;align-items:center;gap:22px;width:calc(100% - 68px);margin:auto;min-height:100px}
.teaser-brand{display:flex;align-items:center;gap:16px;flex-shrink:0;font-size:16px}
.teaser-brand img{object-fit:contain;width:44px;height:44px}
.teaser-brand b{font-weight:600;margin-left:4px}
.teaser-nav{display:flex;align-items:center;gap:34px;font-size:15px;font-weight:600}
.teaser-nav a{padding-block:8px}
.teaser-nav a:not(.language-pill):hover{text-decoration:underline;text-underline-offset:6px}
.teaser-nav .language-pill{border-radius:999px;background:var(--accent-secondary);min-width:56px;min-height:44px;padding:8px 16px;text-align:center}
.teaser-hero{position:relative;isolation:isolate;min-height:580px;height:calc(100svh - 122px);max-height:900px;margin:0 22px;padding:0;border-radius:24px;overflow:hidden;background:var(--text-primary)}
.teaser-hero-photo{position:absolute;inset:0;z-index:-2}
.teaser-hero-photo img{height:100%;width:100%;object-fit:cover;object-position:center 45%}
.teaser-hero-photo:after{content:"";position:absolute;inset:0;background:rgb(58 52 46 / 28%)}
.teaser-hero-content{display:grid;grid-template-columns:minmax(0,1fr) 365px;align-items:end;gap:56px;height:100%;min-height:580px;padding:56px}
.teaser-hero-title{align-self:start;color:var(--background);padding-top:16px}
.teaser-hero-title>p{font-size:16px;margin-bottom:8px}
.bg27-teaser .teaser-hero-title h1{font-size:56px;line-height:1.7;margin-bottom:22px;letter-spacing:-.025em}
.teaser-button{display:inline-flex;align-items:center;justify-content:space-between;gap:22px;background:var(--accent);font-size:16px;font-weight:600;min-height:56px;padding:16px 22px;border-radius:999px;border:0}
.bg27-teaser .teaser-button,.bg27-teaser .teaser-button:visited{color:var(--text-primary)}
.teaser-button:hover{box-shadow:0 0 0 2px var(--text-primary)}
.teaser-hero .teaser-button:focus-visible{outline-color:var(--background)}
.teaser-event-panel{border-radius:24px;background:var(--background);padding:34px;align-self:end;margin-bottom:8px}
.teaser-tag{display:inline-flex;align-items:center;border:1px solid var(--border);font-size:14px;padding:4px 16px;border-radius:999px}
.bg27-teaser .teaser-date{font-family:var(--font-heading);font-size:22px;font-weight:600;line-height:1.7;margin:16px 0}
.teaser-event-panel>p:not(.teaser-date){font-size:15px}
.teaser-launch{display:flex;gap:16px;border-top:1px solid var(--border);padding-top:22px}
.teaser-launch p{font-size:15px;margin:0}
.launch-dot{width:8px;height:8px;background:var(--accent-secondary);border-radius:50%;flex-shrink:0;margin-top:10px}
.hero-credit{position:absolute;bottom:16px;left:56px;color:var(--background)!important;font-size:14px;background:rgb(58 52 46 / 75%);padding:4px 16px;border-radius:999px}
.hero-credit:hover{text-decoration:underline!important}
.teaser-update{padding-block:calc(2 * var(--space-56)) var(--space-56)}
.teaser-intro{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:56px}
.teaser-intro h2{margin:0}
.teaser-intro p{font-size:22px;max-width:38ch;margin:0}
.teaser-reading-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:56px;align-items:start}
.teaser-contents{position:sticky;top:34px;max-height:calc(100svh - 68px);overflow:auto;padding:8px 8px 22px 0;scrollbar-width:thin}
.teaser-contents details>summary{font-weight:600;list-style:none;padding:8px 16px 16px;cursor:pointer;font-size:16px}
.teaser-contents details>summary::-webkit-details-marker{display:none}
.teaser-contents summary span{display:none}
.teaser-contents ol{list-style:none;padding:0;margin:0}
.teaser-contents li{margin:0}
.teaser-contents nav a{display:flex;gap:16px;font-size:15px;padding:8px 16px;border-radius:12px;margin-block:4px;border:1px solid transparent;min-height:44px;align-items:center}
.teaser-contents nav a span{font-size:14px;min-width:18px}
.teaser-contents nav a:hover{border-color:var(--border)}
.teaser-contents nav a[aria-current="location"]{background:var(--accent-secondary);font-weight:600}
.contents-back{display:inline-block;font-size:14px;margin:22px 16px 0;text-decoration:underline!important;text-underline-offset:4px}
.teaser-article{min-width:0}
.teaser-change{padding:34px 0;border-top:1px solid var(--border);scroll-margin-top:34px}
.teaser-change:first-child{padding-top:0;border-top:0}
.change-heading{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:baseline;gap:22px}
.bg27-teaser .change-heading h3{margin-bottom:22px;font-size:22px;overflow-wrap:anywhere}
.change-number{font-family:var(--font-heading);font-weight:600;font-size:22px;color:var(--text-primary);text-align:center;background:var(--border);border-radius:16px}
.change-body{max-width:68ch;margin-left:78px}
.change-body p:last-child{margin-bottom:0}
.change-body ul{margin:0 0 22px;padding-left:22px}
.change-body li{padding-left:8px;margin-block:8px}
.teaser-article-photo{margin:22px 0 34px}
.teaser-article-photo img{width:100%;aspect-ratio:1.7;object-fit:cover;border-radius:24px}
.teaser-article-photo figcaption{font-size:14px;margin-top:8px}
.teaser-closing{border-top:1px solid var(--border);padding:34px 0 0 78px;max-width:calc(68ch + 78px)}
.teaser-closing p{font-size:16px}
.teaser-photo-section{padding:56px 0;background:var(--border);border-radius:24px;margin:0 22px}
.teaser-section-heading{display:flex;justify-content:space-between;align-items:center;gap:34px;margin-bottom:34px}
.teaser-section-heading h2{margin:0}
.teaser-link{text-decoration:underline!important;text-underline-offset:5px;text-decoration-thickness:1px!important;font-size:16px}
.teaser-gallery-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 56px 22px;scroll-padding-inline:56px;scrollbar-width:thin;scrollbar-color:var(--text-secondary) var(--border)}
.teaser-gallery-slide{display:block;flex:0 0 47%;scroll-snap-align:start;border-radius:24px;overflow:hidden}
.teaser-gallery-slide img{width:100%;height:100%;aspect-ratio:1.5;object-fit:cover;transition:transform .4s ease}
.teaser-gallery-slide:hover img{transform:scale(1.025)}
.teaser-gallery-controls{display:flex;justify-content:space-between;align-items:center;gap:22px;padding-top:16px}
.teaser-gallery-controls p{font-size:14px;margin:0}
.gallery-controls{display:flex;align-items:center;gap:16px}
.gallery-controls[hidden]{display:none}
.gallery-controls button{width:44px;height:44px;border-radius:50%;background:var(--background);border:1px solid var(--text-secondary);font-size:22px;line-height:1}
.gallery-controls button:disabled{opacity:.35;cursor:default}
.gallery-controls span{font-size:14px;min-width:34px;text-align:center}
.teaser-launch-end{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;padding-block:112px}
.teaser-launch-end h2{margin:0}
.teaser-launch-end p:first-child{font-size:22px}
.teaser-launch-end p{max-width:42ch}
.teaser-footer{border-top:1px solid var(--border);padding:34px 0}
.teaser-footer-top{display:flex;justify-content:space-between;align-items:center;gap:34px;font-size:15px}
.teaser-social{display:flex;gap:22px}
.teaser-footer a:hover{text-decoration:underline;text-underline-offset:4px}
.teaser-history{margin-top:34px;border-top:1px solid var(--border);padding-top:22px;font-size:14px}
.teaser-history summary{cursor:pointer;min-height:44px}
.teaser-history nav{display:flex;flex-wrap:wrap;gap:16px 22px;padding-block:16px}
.teaser-history nav a{padding:4px 16px;border:1px solid var(--border);border-radius:999px}
.teaser-news{padding-bottom:56px}
.teaser-news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
.teaser-news-grid img{width:100%;aspect-ratio:1.6;object-fit:cover;border-radius:24px;margin-bottom:22px}
.teaser-news-page{padding-block:56px 112px;min-height:60vh}
.teaser-news-page h1{margin-block:34px}
.teaser-news-body{max-width:72ch}
.teaser-news-body img{border-radius:16px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1600px){.teaser-hero-content{max-width:1500px;margin:auto;padding-block:56px;grid-template-columns:minmax(0,1fr) 400px}}
@media(max-width:1100px){
 .teaser-wrap{width:calc(100% - 68px)}
 .teaser-hero-content{gap:34px;padding:34px;grid-template-columns:minmax(0,1fr) 330px}
 .hero-credit{left:34px}
 .teaser-reading-layout{grid-template-columns:220px minmax(0,1fr);gap:34px}
 .change-body,.teaser-closing{margin-left:0;padding-left:0}
 .teaser-contents nav a{padding-inline:8px;gap:8px}
 .teaser-intro{gap:34px}
 .teaser-section-heading h2,.teaser-launch-end h2{font-size:22px}
 .teaser-footer-top{flex-wrap:wrap}
}
@media(max-width:760px){
 html{scroll-padding-top:22px}
 .teaser-wrap{width:calc(100% - 44px)}
 .teaser-header{width:calc(100% - 44px);min-height:88px;gap:16px}
 .teaser-brand{gap:8px;font-size:14px}
 .teaser-brand img{width:34px;height:34px}
 .teaser-brand b{display:block;margin:0;line-height:1}
 .teaser-nav{gap:16px;font-size:14px}
 .teaser-nav .language-pill{min-width:44px;padding:8px}
 .teaser-nav>a:nth-child(2){display:none}
 .teaser-hero{margin:0 8px;min-height:0;height:auto;max-height:none;border-radius:24px}
 .teaser-hero-photo{height:540px;inset:0 0 auto}
 .teaser-hero-photo img{object-position:38% center}
 .teaser-hero-photo:after{background:rgb(58 52 46 / 32%)}
 .teaser-hero-content{display:flex;flex-direction:column;align-items:stretch;padding:34px 16px 16px;gap:0;min-height:0}
 .teaser-hero-title{padding:0 16px;min-height:460px;width:100%}
 .teaser-hero-title>p{font-size:14px}
 .bg27-teaser .teaser-hero-title h1{font-size:56px;letter-spacing:-.045em}
 .teaser-button{font-size:15px}
 .teaser-event-panel{margin:0;align-self:stretch;padding:22px;border-radius:16px}
 .teaser-hero .hero-credit{position:static;display:block;padding:0 22px 16px;font-size:14px;background:none;border-radius:0}
 .teaser-update{padding-top:56px}
 .teaser-intro{grid-template-columns:1fr;gap:22px;margin-bottom:34px}
 .bg27-teaser .teaser-intro h2{font-size:22px}
 .teaser-intro h2 br{display:none}
 .teaser-intro h2 br:after{content:" "}
 .teaser-intro p{font-size:16px;max-width:100%}
 .teaser-reading-layout{display:block}
 .teaser-contents{position:static;max-height:none;padding:0;margin-bottom:34px;overflow:visible}
 .teaser-contents details{border:1px solid var(--border);border-radius:16px;background:var(--background)}
 .teaser-contents details>summary{padding:16px 22px;display:flex;justify-content:space-between;align-items:center}
 .teaser-contents summary span{display:block;font-size:22px;line-height:1}
 .teaser-contents details[open] summary span{transform:rotate(45deg)}
 .teaser-contents ol{padding:0 8px 16px}
 .contents-back{display:none}
 .teaser-change{padding-block:34px;scroll-margin-top:22px}
 .change-heading{grid-template-columns:44px minmax(0,1fr);gap:16px}
 .change-number{font-size:22px;border-radius:12px}
 .change-heading h3{font-size:22px}
 .teaser-article-photo{margin:0 0 34px}
 .teaser-article-photo img{aspect-ratio:1.3;border-radius:16px}
 .teaser-article-photo figcaption{font-size:14px;margin-top:8px}
 .teaser-closing{padding-top:34px;max-width:100%}
 .teaser-photo-section{padding-block:34px;margin-inline:8px}
 .teaser-section-heading{align-items:start;flex-direction:column;gap:16px;margin-bottom:22px}
 .teaser-section-heading h2{font-size:22px}
 .teaser-gallery-track{padding-inline:22px;scroll-padding-inline:22px;gap:16px}
 .teaser-gallery-slide{flex-basis:88%;border-radius:16px}
 .teaser-gallery-controls{align-items:start;flex-direction:column;gap:16px}
 .gallery-controls{align-self:flex-end}
 .teaser-launch-end{grid-template-columns:1fr;gap:22px;padding-block:56px}
 .teaser-launch-end h2{font-size:22px}
 .teaser-launch-end p:first-child{font-size:16px}
 .teaser-footer-top{align-items:start;flex-direction:column;gap:22px}
 .teaser-footer .teaser-brand img{width:44px;height:44px}
 .teaser-news-grid{grid-template-columns:1fr}
 .teaser-news-page h1{font-size:22px}
}
@media(max-width:360px){
 .teaser-header{width:calc(100% - 32px)}
 .teaser-nav{gap:8px}
 .teaser-hero-title{padding-inline:8px}
 .bg27-teaser .teaser-hero-title h1{font-size:22px;letter-spacing:-.025em}
 .bg27-teaser .teaser-hero-title .event-year{font-size:56px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.teaser-gallery-slide img{transition:none}.teaser-gallery-slide:hover img{transform:none}}
@media print{
 .teaser-header,.teaser-contents,.teaser-gallery,.teaser-footer,.hero-credit,.teaser-hero-photo,.teaser-button{display:none!important}
 .teaser-hero{height:auto;min-height:0;background:none;margin:0}
 .teaser-hero-content{display:block;min-height:0;padding:0}
 .teaser-hero-title{color:var(--text-primary);min-height:0}
 .teaser-event-panel{padding:0}
 .teaser-wrap{width:100%}.teaser-reading-layout,.teaser-intro{display:block}
 .teaser-change{break-inside:avoid}.teaser-update{padding-top:34px}.teaser-article-photo img{max-height:200px}
}
