/* One native masthead, articulated in the same five worlds as navigation.css.
   Search/account bindings, home link and route-specific hiding stay native. */
:root[data-design] .site-header{
  position:sticky;top:0;z-index:20;max-width:none;width:100%;
  padding-top:var(--header-safe-top,env(safe-area-inset-top,0px));
  border:0;border-bottom:1px solid var(--line);background:var(--bg);box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
:root[data-design] .site-header.is-scrolled{background:var(--chrome);box-shadow:none}
:root[data-design] .header-shell{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  width:100%;max-width:1200px;min-height:76px;margin:0 auto;gap:14px;
  padding:8px max(18px,var(--header-safe-right,env(safe-area-inset-right,0px))) 8px max(18px,var(--header-safe-left,env(safe-area-inset-left,0px)));
  border:0;border-radius:0;background:transparent;box-shadow:none;
}
:root[data-design] .header-shell .brand{
  display:flex;align-items:center;flex:none;min-width:0;min-height:46px;gap:9px;
  color:var(--text);white-space:nowrap;line-height:1.4;
}
:root[data-design] .header-shell .brand-word{
  color:var(--text);font-family:var(--font-display);font-size:23px;font-weight:700;line-height:1.5;letter-spacing:0;
}
:root[data-design] .header-shell .brand-mark{
  display:grid;place-items:center;flex:none;width:34px;height:38px;
  border:0;border-radius:10px;background:var(--accent-soft);color:var(--accent);box-shadow:none;
}
:root[data-design] .header-shell .brand-mark svg{width:23px;height:23px;fill:currentColor;stroke:none}
:root[data-design] .header-shell .brand-kicker{display:none;margin:0}
:root[data-design] .header-actions{
  display:flex;align-items:center;flex:none;gap:4px;padding:3px;
  border:1px solid var(--line);border-radius:16px;background:var(--surface);
}
:root[data-design] .header-actions :is(.search-trigger,.profile-button){
  display:inline-flex;position:relative;align-items:center;justify-content:center;flex:none;
  width:46px;height:46px;min-width:46px;min-height:46px;padding:0;gap:7px;
  border:0;border-radius:12px;background:transparent;color:var(--text);box-shadow:none;filter:none;
  font:600 12px/1.5 var(--font-ui);white-space:nowrap;
  transition:transform 140ms var(--ease-out),opacity 140ms var(--ease-out);
}
:root[data-design] .header-actions .search-trigger{width:auto;padding-inline:10px}
:root[data-design] .header-actions .search-label{display:block}
:root[data-design] .header-actions kbd{display:none}
:root[data-design] .header-actions svg{width:21px;height:21px;stroke-width:1.7}
:root[data-design] .header-actions .profile-button{background:var(--accent);color:var(--accent-ink)}
:root[data-design] .header-shell :is(.brand,.search-trigger,.profile-button):focus-visible{outline:2px solid var(--focus);outline-offset:3px}
:root[data-design] .header-actions :is(.search-trigger,.profile-button):active{transform:scale(.96);opacity:.78}

/* Lunar: a small bookmark and an olive account key. */
:root[data-design=lunar] .header-shell .brand-mark{border-radius:9px 9px 3px 9px;background:var(--accent);color:var(--accent-ink)}
:root[data-design=lunar] .header-shell .brand-word{font-family:Alexandria,Lunar,sans-serif;font-size:21px}

/* Folio: typography and rules, a quiet editorial masthead. */
:root[data-design=folio] .site-header{background:var(--surface)}
:root[data-design=folio] .header-shell .brand-mark{display:none}
:root[data-design=folio] .header-shell .brand-word{font-size:27px;font-weight:650}
:root[data-design=folio] .header-shell .brand-kicker{display:block;font:700 9px/1.5 Cabinet,sans-serif;letter-spacing:.14em;color:var(--muted)}
:root[data-design=folio] .header-actions{border:0;border-inline-start:1px solid var(--line);border-radius:0;background:transparent;padding:0;padding-inline-start:7px;gap:5px}
:root[data-design=folio] .header-actions :is(.search-trigger,.profile-button){border-radius:0;background:transparent;color:var(--text)}
:root[data-design=folio] .header-actions .profile-button{border:1px solid var(--line)}

/* Gallery: a round exhibit seal; search stays an open textual action. */
:root[data-design=gallery] .site-header{background:var(--surface)}
:root[data-design=gallery] .header-shell .brand-mark{border-radius:50%;width:38px;height:38px;background:var(--accent);color:var(--accent-ink)}
:root[data-design=gallery] .header-shell .brand-word{font-size:24px}
:root[data-design=gallery] .header-actions{padding:0;border:0;background:transparent;gap:7px}
:root[data-design=gallery] .header-actions .profile-button{border:1px solid var(--line);border-radius:50%;background:var(--surface-2);color:var(--text)}
:root[data-design=gallery] .header-actions .search-trigger{border-radius:12px}

/* Aether: lavender, a softly inset panel and one clear lunar signature. */
:root[data-design=aether] .site-header,
:root[data-design=aether] .site-header.is-scrolled{background:transparent;border:0;box-shadow:none;padding-bottom:8px}
:root[data-design=aether] .header-shell{
  width:calc(100% - 24px);max-width:1176px;margin:8px auto 0;min-height:60px;padding-block:5px;padding-inline:10px;
  border:1px solid var(--aether-edge);border-radius:22px;background:var(--aether-panel);
}
:root[data-design=aether] .header-shell .brand-mark{border-radius:50%;width:32px;height:32px;background:transparent;color:var(--accent)}
:root[data-design=aether] .header-shell .brand-word{font-size:24px}
:root[data-design=aether] .header-actions{padding:0;gap:5px;border:0;background:transparent}
:root[data-design=aether] .header-actions .search-trigger{border-radius:15px;background:var(--surface);color:var(--text)}
:root[data-design=aether] .header-actions .profile-button{border-radius:50%;background:var(--aether-button);color:var(--aether-button-ink);border:1px solid var(--aether-edge)}
:root[data-design=aether] .header-shell .aether-flutter[data-aether-placement=header]{left:47%;top:16px;width:20px;height:20px;pointer-events:none}

/* Faris: one heraldic mark replaces the crowded crest/word/moon trio. */
:root[data-design=faris] .site-header,
:root[data-design=faris] .site-header.is-scrolled,
:root[data-design=faris] body:has(.taste-home) .site-header:not(.is-scrolled){background:transparent;border:0;box-shadow:none;padding-bottom:6px}
:root[data-design=faris] .header-shell{
  width:calc(100% - 24px);max-width:1176px;margin:6px auto 0;min-height:60px;padding:5px 10px;
  border:1px solid var(--faris-edge);border-radius:6px;background:var(--faris-panel);
  box-shadow:inset 0 0 0 2px var(--faris-panel),inset 0 0 0 3px var(--line);
}
:root[data-design=faris] .site-header.is-scrolled .header-shell{background:var(--surface)}
:root[data-design=faris] .header-shell::before,
:root[data-design=faris] .header-shell::after{content:"";position:absolute;width:10px;height:10px;pointer-events:none;border:solid var(--faris-metal)}
:root[data-design=faris] .header-shell::before{top:2px;right:2px;border-width:1px 1px 0 0}
:root[data-design=faris] .header-shell::after{bottom:2px;left:2px;border-width:0 0 1px 1px}
:root[data-design=faris] .header-shell .brand{gap:10px}
:root[data-design=faris] .header-shell .brand-mark{display:none}
:root[data-design=faris] .header-shell .brand-word{font-size:24px}
:root[data-design=faris] .header-shell .faris-emblem{display:block;order:-1;width:34px;height:42px;padding:6px 4px;border:1px solid var(--faris-metal);border-radius:3px 3px 9px 9px;background:var(--faris-button);color:#e7d7b8}
:root[data-design=faris] .header-actions{padding:0;gap:5px;border:0;background:transparent}
:root[data-design=faris] .header-actions :is(.search-trigger,.profile-button){border:1px solid var(--faris-edge);border-radius:4px;background:var(--surface);color:var(--text);box-shadow:inset 0 0 0 2px var(--surface),inset 0 0 0 3px var(--line)}
:root[data-design=faris] .header-actions .profile-button{background:var(--faris-button);color:#f6f9ff;border-color:var(--faris-metal);box-shadow:inset 0 0 0 2px #ffffff10}

@media(max-width:359px){
  :root[data-design] .header-shell{gap:9px;padding-right:max(12px,var(--header-safe-right,env(safe-area-inset-right,0px)));padding-left:max(12px,var(--header-safe-left,env(safe-area-inset-left,0px)))}
  :root[data-design] .header-actions .search-label{display:none}
  :root[data-design] .header-actions .search-trigger{width:46px;padding:0}
  :root[data-design=folio] .header-shell .brand-kicker{display:none}
  :root[data-design=aether] .header-shell,:root[data-design=faris] .header-shell{padding-inline:8px}
}
/* On notched devices the inset panel's outer margin itself clears the cutout. */
:root:is([data-design=aether],[data-design=faris]) .header-shell{
  margin-left:max(12px,var(--header-safe-left,env(safe-area-inset-left,0px)));
  margin-right:max(12px,var(--header-safe-right,env(safe-area-inset-right,0px)));
  width:auto;
}
@media(min-width:1200px){
  :root:is([data-design=aether],[data-design=faris]) .header-shell{margin-inline:auto;width:calc(100% - 24px)}
}
@media(max-width:1099px) and (max-height:540px) and (orientation:landscape){
  :root[data-design] .header-shell{min-height:60px;padding-block:4px}
  :root[data-design=aether] .site-header,:root[data-design=faris] .site-header{padding-bottom:4px}
  :root[data-design=aether] .header-shell,:root[data-design=faris] .header-shell{margin-top:4px;min-height:56px;padding-block:3px}
}
@media(min-width:1100px){
  :root[data-design] .header-shell{min-height:94px;padding-right:max(28px,var(--header-safe-right,env(safe-area-inset-right,0px)));padding-left:max(28px,var(--header-safe-left,env(safe-area-inset-left,0px)))}
  :root[data-design=aether] .header-shell,:root[data-design=faris] .header-shell{min-height:78px;margin-top:8px;padding-inline:16px}
  :root[data-design=faris] .site-header{padding-bottom:8px}
  :root[data-design] .mobile-nav{top:calc(20px + var(--header-safe-top,env(safe-area-inset-top,0px)))}
  :root[data-design=aether] .header-shell .aether-flutter[data-aether-placement=header]{display:none}
}
@media(hover:hover) and (pointer:fine){
  :root[data-design] .header-actions :is(.search-trigger,.profile-button):hover{opacity:.82;filter:none}
}
@media(prefers-reduced-motion:reduce){
  :root[data-design] .header-actions :is(.search-trigger,.profile-button){transition:none}
  :root[data-design] .header-actions :is(.search-trigger,.profile-button):active{transform:none}
}
:root[data-design][data-motion=reduced] .header-actions :is(.search-trigger,.profile-button),
:root[data-design].input-keyboard .header-actions :is(.search-trigger,.profile-button){transition:none}
:root[data-design][data-motion=reduced] .header-actions :is(.search-trigger,.profile-button):active,
:root[data-design].input-keyboard .header-actions :is(.search-trigger,.profile-button):active{transform:none}