/* HAAKA PHASE 03 / cinematic editorial UI. This is the only additional UI overrides layer. */
:root {--hero-accent:#e86f31;--focus-ring:#ffd18c;--content-gutter:clamp(18px,3.8vw,50px);--nav-height:78px;color-scheme:dark}
[data-palette="terracotta"]{--hero-accent:#e86f31}
[data-palette="saffron"]{--hero-accent:#f3a41d}
[data-palette="indigo"]{--hero-accent:#9791ff}
[data-palette="forest"]{--hero-accent:#67bca1}
[data-palette="maroon"]{--hero-accent:#ef7785}
[data-palette="slate"]{--hero-accent:#9ed0e0}
[data-theme="light"]{color-scheme:light;--bg:#f8f7f3;--bg-2:#eeece6;--panel:#fffefa;--text:#211f1d;--muted:#56524f;--line:rgba(25,25,25,.19)}
[data-theme="light"][data-palette="terracotta"]{--accent:#873618;--accent-rgb:135,54,24;--accent-soft:#f2d5c5}
[data-theme="light"][data-palette="saffron"]{--accent:#805000;--accent-rgb:128,80,0;--accent-soft:#f2e5c2}
[data-theme="light"][data-palette="indigo"]{--accent:#4741a1;--accent-rgb:71,65,161;--accent-soft:#e7e6fd}
[data-theme="light"][data-palette="forest"]{--accent:#21644f;--accent-rgb:33,100,79;--accent-soft:#dceee8}
[data-theme="light"][data-palette="maroon"]{--accent:#913449;--accent-rgb:145,52,73;--accent-soft:#f5dade}
[data-theme="light"][data-palette="slate"]{--accent:#306478;--accent-rgb:48,100,120;--accent-soft:#deedf1}
html{scroll-padding-top:110px}body{min-width:0}main{display:block;min-width:0}
.container.shell,.container-fluid.shell{padding-inline:var(--content-gutter)}
:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;border-radius:3px}
[data-theme="light"] :where(a,button,input,select,textarea,summary):focus-visible{outline-color:var(--accent)}
.btn-h,.pill-action,.nav-actions a,.nav-actions button{min-height:44px}
.btn-h:active,.pill-action:active{transform:translateY(0)}
/* Shell: two-level editorial nav, active page marker and tighter sticky header. */
.site-header{background:rgba(13,14,15,.98);box-shadow:0 1px 0 rgba(255,255,255,.11);isolation:isolate}
.site-header .topline{gap:clamp(12px,2.2vw,25px);height:38px;padding-inline:1px;letter-spacing:.04em;text-transform:none}
.topline-heading{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.topline-note{margin-left:auto;color:#d1bdab;max-width:20vw;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:500;letter-spacing:0}
.site-header .topline a{font-size:.69rem;letter-spacing:.02em;color:#d4d1cc;font-weight:700}
.site-header .topline a[aria-current=page]{color:var(--hero-accent)}
.site-header .main-nav{min-height:76px;height:auto;padding-block:14px}
.brand{flex:0 0 auto;align-items:center;min-width:120px;max-width:178px}
.brand img{display:block;object-fit:contain;height:auto;max-height:40px;max-width:100%;width:146px}
.brand .logo-light{display:block}.brand .logo-dark{display:none}
.desktop-links{gap:clamp(18px,2.8vw,42px)}.desktop-links a{position:relative;padding-block:15px;white-space:nowrap;color:inherit}
.desktop-links a[aria-current=page]:after{content:'';position:absolute;bottom:7px;left:0;right:0;height:2px;background:var(--hero-accent)}
.nav-actions{gap:clamp(13px,1.5vw,23px)}.site-header .pill-action{display:inline-flex;align-items:center;border-radius:99px;padding-inline:20px}
.search-trigger{display:inline-flex;align-items:center;justify-content:center;min-width:44px;font-size:1.8rem}
.lang-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:37px;white-space:nowrap}
.hamburger{align-items:center;justify-content:center;min-width:44px;min-height:44px;cursor:pointer}
.site-header.shrunk{box-shadow:0 10px 26px #0002}.site-header.shrunk .main-nav{min-height:64px;padding-block:9px;height:auto}
.mobile-drawer{background:#121315;color:#f8f5f0;max-width:min(390px,89vw)}
.mobile-drawer .offcanvas-header{padding:25px;border-bottom:1px solid #343535}
.mobile-menu{padding-bottom:80px}.mobile-menu-heading{margin:24px 0 7px!important;font-size:.67rem!important;text-transform:uppercase;letter-spacing:.16em;color:var(--hero-accent)!important;font-weight:800}
.mobile-menu a{min-height:49px;display:flex;align-items:center;border-color:#313234;font-size:.94rem}
.mobile-menu a[aria-current=page]{color:var(--hero-accent);border-left:2px solid var(--hero-accent);padding-left:12px}
/* Light mode uses true light header/footer with contrasting dark logo, not white-on-white. */
[data-theme=light] .site-header{background:rgba(252,250,245,.98);color:#201c19;box-shadow:0 1px 0 rgba(20,20,20,.12)}
[data-theme=light] .site-header .topline{border-color:#ddd7d1;color:#544c43}
[data-theme=light] .topline-heading{color:#27211c}
[data-theme=light] .site-header .topline a{color:#373330}
[data-theme=light] .site-header .topline a[aria-current=page]{color:var(--accent)}
[data-theme=light] .topline-note{color:#5c5349}
[data-theme=light] .site-header .pill-action{border-color:#59544f}
[data-theme=light] .site-header .hamburger span{background:#24201d}
[data-theme=light] .site-header .brand .logo-light{display:none}
[data-theme=light] .site-header .brand .logo-dark{display:block}
[data-theme=light] .brand .logo-light{display:none}
[data-theme=light] .brand .logo-dark{display:block}
/* Vertical-first hero stays dark for film legibility in both modes. */
.hero-stage{background:radial-gradient(circle at 68% 25%,rgba(220,102,48,.08),transparent 40%),linear-gradient(115deg,#0d0d0f,#211b1a 72%,#101315)}
.hero-copy h1 em,.hero-stage .eyebrow{color:var(--hero-accent)}
.hero-stage .little-stroke{background:var(--hero-accent)}
.hero-stage .btn-orange{background:var(--hero-accent);border-color:var(--hero-accent);color:#121010}
.hero-stage .btn-orange:hover{color:#121010}
.hero-copy h1{overflow-wrap:normal;text-wrap:balance}
.hero-poster-composition{will-change:transform;max-width:580px}
.stack-poster{backface-visibility:hidden}
.story-poster,.stack-poster{box-shadow:0 15px 48px rgba(0,0,0,.16)}
/* Shared text, cards and controls */
.offering-tile:focus-visible,.story-card a:focus-visible .story-poster{border-color:var(--accent)}
.form-layout :is(input,textarea,select),.appearance-editor :is(.form-control,.form-select){background:var(--panel);border:1px solid var(--line);color:var(--text);min-height:44px}
.form-layout :is(input,textarea,select)::placeholder,.appearance-editor input::placeholder{color:var(--muted);opacity:.78}
[data-theme=light] .btn-orange{background:var(--accent);border-color:var(--accent);color:#fff}
[data-theme=light] .btn-orange:hover{color:#fff}
[data-theme=light] .btn-outline{border-color:var(--line);color:var(--text)}
[data-theme=light] .hero-stage .btn-outline,[data-theme=light] .partner-band .btn-outline{color:#fff;border-color:#ffffff80}
[data-theme=light] .hero-stage .btn-orange{color:#17120c;background:var(--hero-accent);border-color:var(--hero-accent)}
[data-theme=light] .hero-stage .btn-orange:hover{color:#17120c}
/* Footer grows with content, the newsletter stays usable at narrow widths. */
.site-footer{background:#101112;color:#eee9e1;border-color:#343434}
.site-footer .brand{max-width:178px}
.site-footer .footer-lead{color:#bab6b0;max-width:340px}
.site-footer h2{color:#fcf8f1}
.site-footer a:not(.brand){min-height:24px;color:#d3cec8}
.site-footer a:focus-visible{color:var(--hero-accent)}
.site-footer .newsletter-strip{border-color:#343333}
.site-footer .newsletter-strip :is(input){background:#19191a;color:#fff;border-color:#646464}
.site-footer .footer-bottom{border-color:#323232;color:#ada9a3}
[data-theme=light] .site-footer{background:#edeae4;color:#211e1b;border-color:#d5cfc9}
[data-theme=light] .site-footer h2{color:#2c2926}
[data-theme=light] .site-footer .footer-lead,[data-theme=light] .site-footer .newsletter-strip p{color:#54514d}
[data-theme=light] .site-footer a:not(.brand){color:#33302c}
[data-theme=light] .site-footer .newsletter-strip,[data-theme=light] .site-footer .footer-bottom{border-color:#c9c5c0;color:#57534d}
[data-theme=light] .site-footer .newsletter-strip input{background:#fffefa;color:#242321;border-color:#817b75}
[data-theme=light] .site-footer .newsletter-strip input::placeholder{color:#68635c}
[data-theme=light] .site-footer .btn-orange{color:#fff}
/* Bottom bar is deliberate 5-item, always keyboard reachable with safe-area padding. */
.mobile-tabs a[aria-current=page]{color:var(--hero-accent);font-weight:800;box-shadow:inset 0 2px var(--hero-accent)}
[data-theme=light] .mobile-tabs{background:#fdfbf7;color:#26221e;border-color:#d8d0c9;box-shadow:0 -5px 25px #00000012}
[data-theme=light] .mobile-tabs a{color:#423d38}
[data-theme=light] .mobile-tabs a[aria-current=page]{color:var(--accent);box-shadow:inset 0 2px var(--accent)}
[data-theme=light] .mobile-tabs a:hover{color:var(--accent)}
/* Admin: ensure canonical appearance controls do not visually leak into other roles. */
.admin-sidebar nav a[aria-current=page]{background:rgba(var(--accent-rgb),.15);color:var(--text);font-weight:800;border-left:3px solid var(--accent)}
.admin-title-bar{min-width:0}.admin-title-bar>div{min-width:0}
.admin-panel{border-radius:5px}
.appearance-intro{display:flex;align-items:center;justify-content:space-between;gap:20px}
.appearance-intro h2{font-size:clamp(1.4rem,2vw,1.9rem)}
.appearance-editor{display:flex;flex-direction:column;gap:15px}
.appearance-editor .admin-panel{margin-bottom:0}
.appearance-editor .section-top.compact{margin:0 0 18px}
.palette-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.palette-option{display:flex;position:relative;min-width:0;flex-direction:column;gap:10px;cursor:pointer;padding:10px;border:2px solid var(--line);border-radius:5px;align-items:center;text-align:center;font-size:.78rem;font-weight:750}
.palette-option input:checked + .palette-visual{outline:2px solid var(--accent);outline-offset:3px}
.palette-option:has(input:checked){border-color:var(--accent);background:rgba(var(--accent-rgb),.09)}
.palette-option:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:3px}
.palette-option input{position:absolute;width:1px;height:1px;opacity:0;left:50%;top:50%}
.palette-visual{background:#202126;width:100%;min-width:0;max-width:110px;height:65px;border-radius:3px;display:flex;align-items:flex-end;padding:9px;gap:6px}
.palette-visual i{display:block;width:13px;height:29px;background:var(--swatch);border-radius:2px}
.palette-visual i:nth-child(2){height:19px;opacity:.68}.palette-visual i:nth-child(3){height:38px;opacity:.8}
.appearance-preview{margin-top:23px;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:clamp(20px,3vw,35px);background:linear-gradient(110deg,#0f1011,#24201f);border:1px solid #59524d;border-radius:6px;color:#fff}
.appearance-preview h3{font-size:clamp(1.4rem,2.2vw,2.4rem);margin:0 0 9px}
.appearance-preview p{margin:0;font-size:.85rem;color:#bbb2a9}
.appearance-preview .eyebrow{color:var(--hero-accent);font-size:.6rem;margin-bottom:12px}
.appearance-preview .btn-orange{background:var(--hero-accent);border-color:var(--hero-accent);color:#101010;flex-shrink:0}
.brand-slot{margin-top:10px;display:flex;justify-content:center;align-items:center;padding:18px;min-height:83px;border:1px solid var(--line);border-radius:4px}
.brand-slot img{max-height:45px;width:auto;max-width:100%}
.brand-slot-light{background:#f9f6f0}.brand-slot-dark{background:#101113}
.appearance-actions{display:flex;align-items:center;gap:20px;margin:8px 0 35px}
.appearance-actions span{color:var(--muted);font-size:.83rem}
/* Responsiveness and stable UI contracts */
@media(max-width:1199.98px){.site-header .topline-note{display:none}.desktop-links{gap:17px}.palette-options{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:991.98px){.site-header .main-nav{height:72px;min-height:72px}.site-header.shrunk .main-nav{height:65px}.site-header .topline{display:none}.admin-sidebar{top:82px}.appearance-intro{flex-direction:column;align-items:start}}
@media(max-width:767.98px){
 body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
 .site-header .main-nav{padding-block:10px}
 .container.shell,.container-fluid.shell{padding-inline:18px}
 .site-header .nav-actions{gap:11px}
 .site-header .pill-action{padding-inline:14px}
 .site-header .search-trigger{display:none}
 .site-header .brand img{width:116px}
 .mobile-tabs{height:calc(66px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}
 .mobile-tabs a{min-width:0;min-height:57px;line-height:1.1;padding:4px 1px}
 .hero-stage{isolation:isolate}.hero-stage .hero-content{padding-top:59px}
 .hero-copy h1{font-size:clamp(2.45rem,9.6vw,4rem)}
 .hero-poster-composition{transform:none;max-width:345px;min-height:315px}
 .story-grid{gap:13px}
 .section-top{flex-wrap:wrap}
 .appearance-preview{flex-direction:column;align-items:flex-start}
 .appearance-preview .btn-orange{min-width:0}
 .palette-options{grid-template-columns:repeat(3,minmax(0,1fr))}
 .appearance-actions{flex-direction:column;align-items:start}
 .newsletter-strip form{width:100%}
 .newsletter-strip input[type=email]{min-width:0;width:100%;flex:1 1 170px}
 .wa-float{bottom:calc(82px + env(safe-area-inset-bottom))}
}
@media(max-width:390px){.palette-options{grid-template-columns:repeat(2,minmax(0,1fr))}.nav-actions{gap:7px}.site-header .pill-action{font-size:.69rem;padding-inline:11px}.lang-toggle{min-width:28px}}
@media(prefers-reduced-motion:reduce){
 .hero-bg{display:none!important}.stack-poster,.story-poster,.offering-tile{transform:none!important;transition:none!important}
}