/* Welcome only: all page-level rules cease to match as soon as login is hidden.
   Original studio photo is 96 KB; opaque dark fallback works without it.
   No JavaScript, auth state, form fields or handlers changed. */
body:has(#login:not([hidden])) {
  background: #0d151d; color: #faf9f5; min-height: 100vh; min-height: 100svh;
  isolation: isolate;
}
body:has(#login:not([hidden]))::before {
  content: ''; position: fixed; inset: -4px; z-index: -2; pointer-events: none;
  background: #0d151d url('/assets/rooms/studio-a.jpg') center 35% / cover no-repeat;
  filter: blur(.4px);
}
body:has(#login:not([hidden]))::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, #07101926 0%, #07101933 52%, #080e1699 100%);
}
body:has(#login:not([hidden])) > header {
  background: transparent; border: 0; max-width: 1152px; margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));
  height: auto; min-height: 88px; position: relative; box-shadow: none;
}
body:has(#login:not([hidden])) > header .brand {width:100%; justify-content:space-between; gap:16px}
body:has(#login:not([hidden])) > header .brandlogo {filter:invert(1); width:110px; height:68px}
body:has(#login:not([hidden])) > header .brandcaption {display:block; color:#eee; font:0/1.5 Arial,sans-serif; letter-spacing:1.5px; text-align:right}
body:has(#login:not([hidden])) > header .brandcaption br {display:none}
body:has(#login:not([hidden])) > .demo,
body:has(#login:not([hidden])) > footer {display:none}
body:has(#login:not([hidden])) > main {
  max-width:1152px; width:100%; margin:0 auto;
  padding:24px max(24px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}
body:has(#login:not([hidden])) #message:not(:empty) {background:#fff6e4; color:#3b2b12; border-radius:12px; border-color:#d6bb84; position:relative; z-index:1}
#login:not([hidden]) {max-width:1104px; margin:20px auto 0; display:grid; gap:28px; font-family:Arial,sans-serif}
#login h1 {font-family:Arial,sans-serif; color:#fff; font-size:clamp(36px,8.8vw,64px); line-height:1.08; letter-spacing:-1.5px; margin:0 0 16px; font-weight:750}
#login .welcome-subtitle {font-size:clamp(16px,3.9vw,22px); line-height:1.5; color:#f0f0ed; margin:0}
#login .welcome-features {list-style:none; margin:30px 0 0; padding:0; display:grid; gap:16px}
#login .welcome-features li {display:flex; align-items:center; gap:16px; font-size:16px; line-height:1.4; max-width:390px; color:#fff}
#login .welcome-features span {display:grid; place-items:center; flex:0 0 38px; height:38px; border-radius:12px; background:#443b28e6; border:1px solid #8d7446; color:#ffda89; font:bold 14px/1 Arial,sans-serif}
#login .welcome-entry {border:1px solid #c9c2b7; border-radius:22px; background:#e7e0d8eb; color:#24221f; padding:24px; box-shadow:0 18px 55px #0004; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); min-width:0}
#login .welcome-entry h2 {font:700 clamp(18px,4.3vw,24px)/1.3 Arial,sans-serif; letter-spacing:-.5px; margin:0 0 8px; color:#24221f}
#login .welcome-entry-hint {font:14px/1.5 Arial,sans-serif; color:#514a40; margin:0 0 20px}
#login form {max-width:none; margin:0}
#login form label {display:block; color:#302a21; font:600 14px/1.5 Arial,sans-serif; margin:14px 0 8px}
#login form input:not([type=checkbox]) {display:block; width:100%; height:50px; border:1px solid #978e7e; border-radius:12px; margin-top:8px; padding:12px 14px; background:#fffaf3; color:#24221f; font:16px/1.5 Arial,sans-serif; scroll-margin-block:24px}
#login form > button {display:block; width:100%; min-height:50px; border:1px solid #181917; border-radius:12px; background:#181917; color:#fff; margin:16px 0 0; padding:12px 16px; font:700 16px/1.5 Arial,sans-serif; cursor:pointer; scroll-margin-block:20px}
#login form > button:hover:not(:disabled) {background:#30322e}
#login form > button:disabled {opacity:.65; cursor:wait}
#login form .check {display:flex; align-items:flex-start; gap:10px; font-weight:400}
#login .check input {flex:0 0 20px; width:20px; height:20px; margin:0; accent-color:#51442b}
#login #code-form:not([hidden]) {padding-top:20px; margin-top:22px; border-top:1px solid #b5ab9d}
#login :is(input,button):focus-visible {outline:3px solid #8b5b11; outline-offset:3px}
#login .welcome-footer {margin:0; text-align:center; font:12px/1.5 Arial,sans-serif; letter-spacing:.3px; color:#c6cbd0}
@media(min-width:800px) {
  #login:not([hidden]) {grid-template-columns:minmax(0,1.2fr) minmax(320px,1fr); align-items:center; column-gap:64px; margin-top:76px}
  #login .welcome-features {margin-top:40px; gap:22px}
  #login .welcome-entry {padding:32px}
  #login .welcome-footer {grid-column:1/-1; margin-top:36px}
}
@media(max-width:360px) {
  body:has(#login:not([hidden])) > main {padding-left:16px; padding-right:16px}
  #login .welcome-entry {padding:20px 16px}
}
@media(prefers-reduced-motion:reduce) {#login *,#login *::before,#login *::after {animation:none!important; transition:none!important; scroll-behavior:auto!important}}

body:has(#login:not([hidden])) > header .brandcaption::after {content:"STUDIO MEMBERSHIP"; font:10px/1.5 Arial,sans-serif}

/* Preserve recognisable equipment in portrait rather than cropping a cover image
   to the centre of a tall phone. Original photo, no fabricated composition. */
@media(max-width:799px) {
  body:has(#login:not([hidden]))::before {background-size:auto 640px; background-position:40% 0}
  body:has(#login:not([hidden]))::after {background:linear-gradient(180deg,#0710191a 0px,#07101926 300px,#080e1640 450px,#0d151dd9 610px,#0d151d 660px)}
  #login .welcome-story {text-shadow:0 2px 12px #000,0 1px 3px #0009}
}