/* Four-door menu in the classic skin (the Zine skin styles the same markup in zine-nav.css).
   Doors: Rádio, Portal, Habblet, Tabblet. Each opens one panel under the header. */
:root:not([data-skin=zine]) .public-header{position:relative}
:root:not([data-skin=zine]) .public-header nav.zine-nav{justify-content:flex-start;gap:12px;margin-left:20px}
:root:not([data-skin=zine]) .public-header .zine-door{position:static;flex:none}
:root:not([data-skin=zine]) .public-header .zine-door>summary{display:flex;align-items:center;gap:6px;min-height:48px;padding:10px 16px;border-radius:12px;
  font-size:15px;font-weight:900;letter-spacing:-.01em;color:var(--text,#f8f3ff);background:transparent;transition:background-color .15s ease-out,color .15s ease-out}
:root:not([data-skin=zine]) .public-header .zine-door>summary:hover{background:var(--raised,#211937)}
:root:not([data-skin=zine]) .public-header .zine-door>summary:focus-visible{outline:3px solid var(--brand,#dc82ff);outline-offset:2px}
:root:not([data-skin=zine]) .public-header .zine-door.has-active>summary{color:var(--brand,#dc82ff);background:transparent;box-shadow:inset 0 -3px 0 var(--brand,#dc82ff);border-radius:12px 12px 4px 4px}
:root:not([data-skin=zine]) .public-header .zine-door[open]>summary{background:var(--raised,#211937);color:var(--text,#f8f3ff);box-shadow:none}
:root:not([data-skin=zine]) .public-header .zine-caret{width:14px;height:14px;opacity:.7;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
:root:not([data-skin=zine]) .public-header .zine-door[open] .zine-caret{transform:rotate(180deg)}

/* The panel: columns of links with an icon, a title and one line of context, plus a feature card. */
:root:not([data-skin=zine]) .public-header .zine-drop{position:absolute;top:calc(100% - 6px);left:50%;translate:-50% 0;right:auto;width:min(920px,calc(100% - 48px));z-index:17;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px 36px;padding:28px 28px 24px;background:var(--surface,#14152e);
  border:1px solid var(--stroke,#493961);border-radius:20px;box-shadow:0 24px 60px #000a;animation:nav-door-in .18s cubic-bezier(.2,.8,.2,1) both;transform-origin:50% 0}
:root:not([data-skin=zine]) .public-header .zine-drop-col{display:grid;align-content:start;gap:6px;min-width:0}
:root:not([data-skin=zine]) .public-header .zine-drop-title{margin:0 0 10px;padding:0 10px 8px;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#a5a5c5);border-bottom:1px solid var(--stroke,#493961)}
:root:not([data-skin=zine]) .public-header .zine-drop-col>:is(a,button){display:flex;align-items:flex-start;gap:14px;min-height:52px;padding:11px 12px;border:0;border-radius:12px;background:transparent;
  color:var(--text,#f8f3ff);text-align:left;font:inherit;cursor:pointer;text-decoration:none;transition:background-color .15s ease-out}
:root:not([data-skin=zine]) .public-header .zine-drop-col>:is(a,button):hover{background:var(--raised,#211937)}
:root:not([data-skin=zine]) .public-header .zine-drop-col>:is(a,button):focus-visible{outline:3px solid var(--brand,#dc82ff);outline-offset:-1px}
:root:not([data-skin=zine]) .public-header .zine-drop-col>:is(a,button)[aria-current=page]{background:var(--raised,#211937);box-shadow:none}
:root:not([data-skin=zine]) .public-header .zine-drop-col>a.active{color:var(--text,#f8f3ff);box-shadow:none}
:root:not([data-skin=zine]) .public-header .zine-drop-col>:is(a,button)[aria-current=page] b{color:var(--brand,#dc82ff)}
:root:not([data-skin=zine]) .public-header .zine-drop-col .zi{flex:none;width:22px;height:22px;margin-top:1px;color:var(--brand,#dc82ff)}
:root:not([data-skin=zine]) .public-header .zine-drop-col :is(a,button)>span{display:grid;gap:1px;min-width:0}
:root:not([data-skin=zine]) .public-header .zine-drop-col b{font-size:14px;font-weight:850;line-height:1.3}
:root:not([data-skin=zine]) .public-header .zine-drop-col small{font-size:12.5px;line-height:1.35;color:var(--muted,#a5a5c5);font-weight:600}
:root:not([data-skin=zine]) .public-header .zine-drop-feature{display:grid;align-content:start;gap:8px;padding:18px;border-radius:16px;text-decoration:none;color:var(--text,#f8f3ff);
  background:linear-gradient(160deg,color-mix(in srgb,var(--brand,#dc82ff) 22%,var(--raised,#211937)),var(--raised,#211937));border:1px solid color-mix(in srgb,var(--brand,#dc82ff) 35%,var(--stroke,#493961));
  transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s ease-out}
:root:not([data-skin=zine]) .public-header .zine-drop-feature:hover{transform:translateY(-2px);border-color:var(--brand,#dc82ff)}
:root:not([data-skin=zine]) .public-header .zine-drop-feature b{font-size:20px;font-weight:900;line-height:1.15;letter-spacing:-.02em}
:root:not([data-skin=zine]) .public-header .zine-drop-feature small{font-size:13px;line-height:1.45;color:var(--muted,#c1bddb)}
:root:not([data-skin=zine]) .public-header .zine-tag{justify-self:start;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  background:color-mix(in srgb,var(--brand,#dc82ff) 22%,transparent);color:var(--brand,#dc82ff)}
:root:not([data-skin=zine]) .public-header .zine-feature-cta{justify-self:start;margin-top:4px;padding:8px 14px;border-radius:10px;background:var(--brand,#dc82ff);color:var(--bg,#080b20);font-size:13px;font-weight:900}
@keyframes nav-door-in{from{opacity:0;transform:translateY(-6px)}}

/* Four doors fit down to tablets: no hamburger above 700px. */
@media(min-width:701px) and (max-width:1100px){
  :root:not([data-skin=zine]) .public-header .public-menu-toggle:not([hidden]){display:none}
  :root:not([data-skin=zine]) .public-header[data-nav-enhanced] nav.zine-nav{display:flex;position:static;padding:0;margin-left:0;background:transparent;border:0;box-shadow:none;max-height:none;overflow:visible}
  :root:not([data-skin=zine]) .public-header .zine-door{grid-column:auto;border:0;padding:0}
  :root:not([data-skin=zine]) .public-header nav.zine-nav{gap:4px;margin-left:8px}
  :root:not([data-skin=zine]) .public-header .zine-door>summary{padding:10px 12px}
  :root:not([data-skin=zine]) .public-header .zine-drop{width:calc(100% - 32px);padding:20px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
  :root:not([data-skin=zine]) .public-header .zine-drop-feature{display:none}
  :root:not([data-skin=zine]) .public-header #member-link{margin-left:auto}
}
/* Phones: the doors stack inside the menu sheet and open in place. */
@media(max-width:700px){
  :root:not([data-skin=zine]) .public-header[data-nav-enhanced] nav.zine-nav{grid-template-columns:1fr;gap:4px;left:12px;right:12px;margin:0}
  :root:not([data-skin=zine]) .public-header .zine-door{grid-column:1/-1;border:0;padding:0}
  :root:not([data-skin=zine]) .public-header .zine-door>summary{width:100%;justify-content:space-between;min-height:52px;font-size:17px;padding:12px 14px}
  :root:not([data-skin=zine]) .public-header .zine-drop{position:static;translate:none;width:auto;padding:4px 0 10px;background:transparent;border:0;box-shadow:none;border-radius:0;grid-template-columns:1fr;gap:12px;animation:none}
  :root:not([data-skin=zine]) .public-header .zine-drop-feature{display:none}
}
@media(prefers-reduced-motion:reduce){
  :root:not([data-skin=zine]) .public-header :is(.zine-drop,.zine-door>summary,.zine-caret,.zine-drop-feature,.zine-drop-col>a){animation:none;transition:none}
}