/* The site-wide top line and header, as on the homepage, Watch, Coming soon and Journal (used by /immersion/ and /designer/) (values copied from home.css and
   home-extra.css). Scoped to .topline / .site-header / .sx-search so it cannot touch the Immersion page's own styles.
   If the shared header changes, update this file to match. */
.topline,.site-header{--sh-bg:#222424;--sh-ink:#dcdede;--sh-line:#373a3a;--sh-gold:#c5a77b;font-family:'DM Sans',sans-serif;box-sizing:border-box}
.topline *,.site-header *{box-sizing:border-box}
.topline{height:33px;padding:0 clamp(22px,3.5vw,84px);background:#161818;color:#969a96;display:flex;align-items:center;font-size:10px;letter-spacing:.6px}
.site-header{height:88px;padding:0 clamp(22px,3.5vw,84px);display:flex;align-items:center;gap:37px;border-bottom:1px solid var(--sh-line);background:#222424f2;position:sticky;top:0;z-index:50;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:var(--sh-ink)}
.site-header a{color:inherit;text-decoration:none;font-size:inherit}
.site-header .brand{display:inline-flex;align-items:center;white-space:nowrap}
.site-header .brand-logo{height:54px;width:auto;display:block;flex:none}
.site-header nav{display:flex;align-items:center;gap:26px;margin-left:auto;white-space:nowrap}
.site-header nav a{font-size:13px;color:#949898;position:relative;white-space:nowrap}
.site-header nav a.active,.site-header nav a:hover{color:#dfe0e0}
.site-header nav a.active:after{content:'';width:4px;height:4px;background:var(--sh-gold);position:absolute;bottom:-12px;left:50%;border-radius:50%}
.site-header .tiny-label{font-size:9px;border:1px solid #484c4c;padding:2px 4px;border-radius:3px;color:#949898;margin-left:4px}
.header-actions{display:flex;gap:17px;align-items:center}
.header-actions button,#mobile-menu{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}
.header-actions .icon-button{width:20px;height:25px;display:grid;place-items:center}
.header-actions .icon-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4}
.header-actions .button{display:inline-flex;justify-content:center;align-items:center;gap:12px;padding:10px 14px;border:1px solid transparent;border-radius:5px;font-size:12px;letter-spacing:.1px;white-space:nowrap;background:var(--sh-gold);color:#161818}
.header-actions .button span{color:inherit}
.header-actions .button:hover{background:#d4b98e;transform:translateY(-2px)}
.header-actions button,.header-actions .button,.site-header nav a{transition:color .2s,background .2s,transform .2s}
.account-chip{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 12px;border:1px solid #4a4d4d;border-radius:999px;color:var(--sh-ink);font-size:12px;letter-spacing:.04em;text-decoration:none;white-space:nowrap}
.account-chip:hover{border-color:var(--sh-gold)}
.account-chip.is-member{padding:0;width:34px;background:var(--sh-gold);border-color:var(--sh-gold);color:#161818;font-weight:500}
.site-header nav .nav-account{display:none}
#mobile-menu{display:none}
@media(max-width:1200px){.site-header{gap:20px}.site-header nav{gap:14px}.site-header nav a{font-size:12px}.site-header .brand-logo{height:46px}.header-actions{gap:13px}.header-actions .button span{display:none}.header-actions .button{padding:8px 11px;font-size:18px}}
/* Tablets and phones: the links fold into the menu from 1060 px (seven links since the REW analyzer joined in October 2026, plus search, Sign in and Ask the Advisor, do not fit a narrower header with the studio logo). */
@media(max-width:1060px){
.topline{height:29px;font-size:9px}
.site-header{gap:17px;height:76px}
.site-header .brand{flex:none}
.site-header nav{display:none;position:absolute;top:76px;left:0;right:0;background:#1b1d1d;padding:24px clamp(22px,3.5vw,84px);box-shadow:0 10px 20px #00000066;flex-wrap:wrap;gap:25px;margin-left:0}
.site-header nav.open{display:flex}
.site-header nav a{font-size:14px}
.site-header nav .nav-account{display:flex}
.account-chip{display:none}
.header-actions{margin-left:auto;gap:12px}
#mobile-menu{display:block;font-size:19px;margin-left:2px}}
@media(max-width:700px){
.topline{font-size:8px;padding:0 5%}
.site-header{height:70px;padding:0 5%}
.site-header .brand-logo{height:42px}
.site-header nav{top:70px;padding:24px 5%}
.header-actions .button{padding:7px 10px;font-size:16px}}
/* Header search dialog (same wording and behaviour as the other pages) */
.sx-search{width:min(640px,calc(100vw - 32px));max-height:86vh;overflow:auto;background:#2a2d2d;color:#dcdede;border:1px solid #373a3a;border-radius:14px;padding:30px;font-family:'DM Sans',sans-serif;box-shadow:0 25px 100px #0008}
.sx-search::backdrop{background:#161818cc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sx-search .modal-close{position:absolute;top:12px;right:14px;width:31px;height:31px;border:0;border-radius:50%;background:#373a3a;color:inherit;font-size:22px;line-height:1;cursor:pointer}
.sx-search .eyebrow{font-size:10px;letter-spacing:1.7px;color:#8e9292}
.sx-search h2{font-weight:400;font-size:26px;margin:10px 0 16px}
.sx-search #sx-form{display:flex;gap:10px}
.sx-search #sx-input{min-width:0;flex:1;padding:12px;background:#1e2020;border:1px solid #3d4141;border-radius:5px;color:inherit;font:inherit;font-size:14px}
.sx-search #sx-form button{background:var(--sh-gold,#c5a77b);color:#161818;border:0;border-radius:5px;padding:0 18px;font:inherit;font-size:13px;cursor:pointer}
.sx-search .content-note{font-size:12px;color:#858a8a;margin:16px 0 0}
.sx-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.sx-list a{display:flex;align-items:center;gap:14px;padding:8px;border-radius:10px;text-decoration:none;color:inherit}
.sx-list a:hover,.sx-list a:focus-visible{background:#ffffff0d}
.sx-list img,.sx-noimg{width:46px;height:69px;border-radius:5px;object-fit:cover;background:#222424;flex:none}
.sx-list small{display:block;color:#858a8a;margin-top:3px}