/* Shell layout for the Black Card preview: header, layer nav, footer and theme control.
   Tokens and components come from kit/em-kit.css. */
.skip{position:absolute;left:-9999px;top:0;z-index:80;background:var(--ink);color:var(--bg);padding:10px 14px;font:500 12px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase}
.skip:focus{left:12px;top:12px}
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--bg) 74%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav .nav-in{display:flex;align-items:center;gap:28px;min-height:70px}
.brand{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}
.brand-mark{width:30px}
.brand>span:last-child{font:500 12.5px/1 var(--f);letter-spacing:.34em;text-transform:uppercase;white-space:nowrap}
.nav-in>nav{display:flex;gap:24px;margin-left:auto}
.nav nav .em-tag{padding:8px 0;border-bottom:1px solid transparent}
.nav nav .em-tag:hover,.nav nav .em-tag[aria-current="page"]{border-bottom-color:var(--c)}
.nav-bar{height:2px;background:var(--spectrum);opacity:.85}
.nav-menu{display:none;position:relative}
.nav-menu summary{list-style:none;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--ru)}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu summary span,.nav-menu summary span::before,.nav-menu summary span::after{content:"";display:block;width:16px;height:1.5px;background:var(--ink)}
.nav-menu summary span{position:relative}
.nav-menu summary span::before{position:absolute;top:-5px}
.nav-menu summary span::after{position:absolute;top:5px}
.nav-menu nav{position:absolute;right:0;top:calc(100% + 12px);display:grid;gap:4px;min-width:220px;padding:14px 18px;background:var(--raise);border:1px solid var(--ru)}
.nav-menu nav .em-tag{padding:14px 0;min-height:44px}
main{position:relative;z-index:2}
/* The theme's surface and text colors under second names, for a subtree that defines its own --bg and --ink. */
:root{--theme-bg:var(--bg);--theme-ink:var(--ink)}
.foot{position:relative;z-index:2;border-top:1px solid var(--ru);padding-block:56px calc(64px + env(safe-area-inset-bottom,0px))}
.foot-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px 48px;align-items:center}
.foot nav{display:flex;flex-wrap:wrap;gap:10px 28px}
.foot nav a{color:var(--mu);text-decoration:none;font-size:14px;padding:6px 0}
.foot nav a:hover{color:var(--ink)}
.theme{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--ru);border-radius:999px}
.theme button{font:500 12.5px/1 var(--f);color:var(--mu);background:none;border:0;border-radius:999px;padding:9px 13px;min-height:34px;cursor:pointer}
.theme button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.foot-note{grid-column:1/-1;color:var(--mu);margin:0}
:where(a,button,summary):focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (max-width:1100px){
  .nav-in>nav{display:none}
  .nav .em-btn{margin-left:auto}
  .nav-menu{display:block}
  .nav .nav-in{gap:12px}
  .foot-in{grid-template-columns:1fr;justify-items:start}
}
@media (max-width:560px){
  .nav .em-btn{padding:11px 12px;font-size:10.5px}
  .brand>span:last-child{letter-spacing:.22em;font-size:11.5px}
}
/* Production shell (src/layouts/BlackCard.astro and publicDocument): the shared header takes the page's
   theme tokens instead of its own dark set, and the shared footer carries the theme control. */
:root{--spectrum:linear-gradient(90deg,var(--f-ember),var(--f-iris),var(--f-cobalt),var(--f-straw));--spectrum-c:conic-gradient(var(--f-ember),var(--f-iris),var(--f-cobalt),var(--f-straw),var(--f-ember))}
.em-site-header{--nav-bg:var(--bg);--nav-raise:var(--raise);--nav-ink:var(--ink);--nav-muted:var(--mu);--nav-rule:var(--ru);--nav-ember:var(--c-ember);--nav-iris:var(--c-iris);--nav-cobalt:var(--c-cobalt);--nav-straw:var(--c-straw);--nav-spectrum:var(--spectrum);position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--bg) 74%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.em-site-header [data-em-color=ember]{--cf:var(--f-ember)}
.em-site-header [data-em-color=iris]{--cf:var(--f-iris)}
.em-site-header [data-em-color=cobalt]{--cf:var(--f-cobalt)}
.em-site-header [data-em-color=straw]{--cf:var(--f-straw)}
.em-site-header [data-em-color]::before{background:var(--cf);box-shadow:inset 0 0 0 var(--keyline) color-mix(in srgb,var(--cf) 78%,#000)}
.em-site-header .em-account-link{background:var(--btn);color:var(--onbtn)}
.em-site-footer{position:relative;z-index:2;border-top:1px solid var(--ru);padding-block:56px calc(64px + env(safe-area-inset-bottom,0px))}
.em-footer-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px 48px;align-items:center}
.em-site-footer .em-brand{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);font:500 12.5px/1 var(--f);letter-spacing:.34em;text-transform:uppercase;white-space:nowrap}
.em-site-footer .em-brand-mark{color:var(--ink)}
.em-site-footer nav{display:flex;flex-wrap:wrap;gap:10px 28px}
.em-site-footer nav a{color:var(--mu);text-decoration:none;font-size:14px;padding:6px 0}
.em-site-footer nav a:hover{color:var(--ink)}
.em-theme{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--ru);border-radius:999px}
.em-theme button{font:500 12.5px/1 var(--f);color:var(--mu);background:none;border:0;border-radius:999px;padding:9px 13px;min-height:34px;cursor:pointer}
.em-theme button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.em-footer-note{grid-column:1/-1;color:var(--mu);margin:0;font-size:14px}
.em-footer-note a{color:var(--ink)}
@media (max-width:1100px){.em-footer-in{grid-template-columns:1fr;justify-items:start}}