/* Quiet browsing within the original floating navigation. */
.header{gap:20px;padding-inline:26px}
.header.is-scrolled{max-width:1120px}
.header #navigation{display:flex;gap:3px;align-items:center;position:relative}
.header #navigation>a,.header .nav-disclosure>summary{font:400 12px/1.4 var(--sans);display:flex;align-items:center;gap:7px;padding:12px 13px;color:var(--ink);border:0;white-space:nowrap;min-height:44px;cursor:pointer;position:relative;z-index:1;text-decoration:none;transition:color .2s}
.header #navigation>a.is-active,.header .nav-disclosure>summary.is-active{color:var(--paper)}
.nav-disclosure{border:0;padding:0;margin:0;position:static}
.nav-disclosure>summary{list-style:none}
.nav-disclosure>summary::-webkit-details-marker{display:none}
.header .nav-disclosure>summary:after{display:none}
.header .nav-disclosure>summary .nav-plus{font:400 15px/1 var(--sans);display:inline-block;transition:transform .2s;opacity:.6}
.nav-disclosure[open]>summary .nav-plus{transform:rotate(45deg)}
.header .nav-panel{position:absolute;left:0;top:calc(100% + 18px);width:360px;padding:27px 25px 20px;background:#fffdf7;border:1px solid #1b4d8c19;border-radius:20px;box-shadow:0 20px 50px #0e1b2c16;isolation:isolate}
.header .nav-panel:before{content:'';position:absolute;inset:-20px 0 auto;height:20px}
.header .nav-panel-title{font:400 24px/1.2 var(--serif);color:var(--ink);margin:0 0 17px;padding:0;position:relative;z-index:1}
.header .nav-options{display:grid;gap:2px}
.header .nav-panel a{display:block!important;font:400 13px/1.5 var(--sans);padding:12px 10px;margin-inline:-10px;white-space:normal;border-radius:7px;min-height:44px;color:var(--muted);text-decoration:none}
.header .nav-panel a:hover,.header .nav-panel a:focus-visible{background:#1b4d8c08;color:var(--blue)}
.header .nav-panel a[aria-current=page]{color:var(--blue);background:#1b4d8c08}
.header .nav-panel .nav-overview{font-size:11px;color:var(--blue);border-top:1px solid #1b4d8c19;border-radius:0;margin:15px 0 0;padding:16px 0 3px}
.header .nav-panel>img{position:absolute;right:12px;top:0;width:100px;height:85px;object-fit:contain;opacity:.42;pointer-events:none;z-index:-1}
.header #navigation .nav-mobile-cta{display:none}
.header :is(a,summary,button):focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.header .nav-cta{white-space:nowrap;gap:0;min-height:44px}
/* Link labels carry the invitation; colour and underline make the action apparent. */
.text-link:hover,.creation-action:hover{color:var(--blue);text-decoration:underline;text-underline-offset:5px}
@media(max-width:800px){
 .header,.header.is-scrolled{max-width:calc(100% - 24px);height:68px;padding:0 18px;gap:12px}
 .header .brand{font-size:25px}.header .brand img{width:26px;height:26px}
 .header .nav-cta{display:none}
 .header .menu-toggle{display:flex;align-items:center;gap:10px;background:transparent;border:1px solid #1b4d8c24;border-radius:28px;color:var(--ink);font:400 12px var(--sans);min-height:44px;padding:10px 15px;margin-left:auto;cursor:pointer}
 .header #navigation{display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);padding:12px 20px 20px;background:var(--paper);border:1px solid #1b4d8c19;border-radius:22px;box-shadow:0 18px 45px #0e1b2c14;flex-direction:column;align-items:stretch;gap:0;max-height:calc(100dvh - 112px);overflow-y:auto;overscroll-behavior:contain}
 .header #navigation.open{display:flex}
 .header #navigation>.nav-marker{display:none}
 .header #navigation>a,.header .nav-disclosure>summary{font-size:15px;min-height:50px;padding:13px 3px;justify-content:space-between;color:var(--ink);border-bottom:1px solid #1b4d8c12;border-radius:0}
 .header #navigation>a.is-active,.header .nav-disclosure>summary.is-active{color:var(--blue);background:transparent}
 .header .nav-disclosure{width:100%}
 .header .nav-panel{position:relative;left:auto;top:auto;width:auto;padding:5px 0 12px 13px;border:0;border-radius:0;box-shadow:none;background:transparent}
 .header .nav-panel-title,.header .nav-panel>img,.header .nav-panel:before{display:none}
 .header .nav-panel a{font-size:13px;padding:12px 8px;margin:0;min-height:44px}
 .header .nav-panel .nav-overview{font-size:12px;margin:6px 0 0;padding:12px 8px}
 .header #navigation .nav-mobile-cta{display:flex;justify-content:center;background:var(--ink);color:var(--paper);margin-top:18px;padding:14px;border-radius:28px;border:0;font-size:13px}
}
@media(prefers-reduced-motion:reduce){.header .nav-plus,.header #navigation>a,.header .nav-disclosure>summary{transition:none}}


/* Each format and industry menu is directly accessible. */
@media(min-width:801px){.header .nav-panel{left:50%;transform:translateX(-50%)}}

/* Keep the complete navigation on laptop and smaller desktop windows. */
@media(min-width:801px){
 .header{height:64px;max-width:1160px;padding-inline:20px;gap:12px}
 .header .brand{font-size:23px;gap:9px}.header .brand img{width:26px;height:26px}
 .header #navigation{gap:0}.header #navigation>a{font-size:12px;padding-inline:10px}
 .header .nav-cta{display:inline-flex;min-height:44px;font-size:12px;padding:11px 18px}
 .header .menu-toggle{display:none}
}
@media(min-width:801px) and (max-width:1050px){
 .header{width:calc(100% - 40px);padding-inline:10px}
 .header .brand{font-size:22px}.header #navigation>a{padding-inline:8px}
}

/* Position first, then glide horizontally from the previous tab. */
.header #navigation>.nav-marker{transform:translate(0,-50%);transition:none}
.header #navigation>.nav-marker[data-ready]{transition:transform .46s cubic-bezier(.22,1,.36,1),width .46s cubic-bezier(.22,1,.36,1),opacity .18s ease}
@media(prefers-reduced-motion:reduce){.header #navigation>.nav-marker[data-ready]{transition:none}}
.motion-paused .header #navigation>.nav-marker[data-ready]{transition:none}

/* A readable glass surface from the first scroll, including mobile Safari. */
.header,.header.is-scrolled{background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,253,247,.84));border:1px solid rgba(255,255,255,.85);box-shadow:inset 0 1px 0 #fff,0 6px 24px #1020330c;-webkit-backdrop-filter:blur(24px) saturate(145%);backdrop-filter:blur(24px) saturate(145%)}
.header.is-scrolled{background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(255,253,247,.88));box-shadow:inset 0 1px 0 #fff,0 8px 28px #10203314}
.header .brand{color:var(--ink);flex-shrink:0}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.header,.header.is-scrolled{background:#fffdf7}}
@media(prefers-reduced-transparency:reduce){.header,.header.is-scrolled{background:#fffdf7;-webkit-backdrop-filter:none;backdrop-filter:none}}
