/* Shared public navigation: desktop bar and adaptive floating mobile controls.
   The article shelf and all public pages use these same dimensions and typography.
   Equal side columns center navigation independently of logo and account-control widths. */
html { scrollbar-gutter: stable; }
:root body .site-header {
  position: fixed; top: 0; left: 0; right: auto; transform: none; z-index: 30;
  box-sizing: border-box; width: 100vw; max-width: none; height: max(80px, 5.555556vw); margin: 0; padding: 0 max(36px, 2.5vw);
  display: grid; grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr); align-items: center; justify-content: space-between; gap: 20px;
  border-radius: 0; background: #ffffffeb; box-shadow: none;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  color: #171717;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 15px; line-height: 1.7; font-synthesis: none; -webkit-font-smoothing: antialiased;
}
:root body .site-header a { color: inherit; text-decoration: none; }
:root body .site-header .brand {
  display: inline-flex; flex-direction: row; align-items: center; flex: none; gap: 8px; justify-self: start;
  font-size: max(24px, 1.666667vw); font-weight: 700; letter-spacing: -.04em; line-height: 1.7;
}
:root body .site-header .brand img { display: block; width: 28px; height: 28px; object-fit: contain; filter: none; }
:root body .site-header .desktop-nav {
  display: flex; align-items: center; gap: max(30px, 2.083333vw); margin: 0;
  font-size: 12px; font-weight: 550;
}
:root body .site-header .desktop-nav a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  font-size: max(16px, 1.111111vw); font-weight: 550; line-height: 1.5; white-space: nowrap;
}
/* Match Mobbin: color-only feedback stays enabled without spatial motion. */
:root body .site-header :is(.desktop-nav, .mobile-nav) a,
:root body .site-header .header-login {
  position: relative; opacity: 1;
  transition: color 150ms cubic-bezier(0, 0, .2, 1) !important;
}
:root body .site-header :is(.desktop-nav, .mobile-nav) a::after { content: none; }
@media (hover: hover) {
  :root body .site-header :is(.desktop-nav, .mobile-nav) a:hover,
  :root body .site-header .header-login:hover {
    color: #707070; opacity: .8; background: transparent; text-decoration: none;
  }
}
:root body .site-header .header-actions { justify-self: end; display: flex; align-items: center; gap: 20px; font-size: 14px; }
/* Login uses the same color-only feedback as the navigation links. */
:root body .site-header .header-login {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-height: 40px; margin: 0; padding: 0 20px; border-radius: 999px;
  background: transparent; color: inherit;
  font-size: 13px; font-weight: 650; line-height: 1; letter-spacing: .02em; white-space: nowrap;
}
:root body .site-header .mobile-menu-button {
  display: none; place-items: center; flex: none; box-sizing: border-box;
  width: 44px; height: 44px; margin: 0; padding: 8px; font: inherit; border: 0; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer;
}
:root body .site-header .mobile-menu-button svg { width: 100%; height: 100%; }
:root body .site-header .mobile-nav { display: none; }
:root body .site-header .mobile-nav:not([hidden]) {
  position: absolute; top: calc(100% + 8px); left: auto; right: 16px;
  display: flex; flex-direction: column; width: min(240px, calc(100vw - 32px)); padding: 8px;
  border: 0; border-radius: 20px; background: rgb(255 255 255 / .94);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 16px 56px rgb(0 0 0 / .14); transform-origin: top right;
}
:root body .site-header .mobile-nav a { padding: 12px 14px; border-radius: 12px; font-size: 16px; font-weight: 600; }
:root body .site-header .mobile-nav a { align-self: stretch; }
:root body .site-header :is(a, button):focus-visible { outline: 2px solid #655cff; outline-offset: 3px; }

@media (max-width: 1100px) {
  :root body .site-header { padding: 0 22px; }
  :root body .site-header .desktop-nav { gap: 18px; }
  :root body .site-header .header-actions { gap: 12px; }
}
@media (max-width: 1100px) {
  :root body .site-header { height: 64px; padding: 0 20px; }
  :root body .site-header .desktop-nav { display: none; }
  :root body .site-header .mobile-menu-button { display: inline-grid; }
}
@media (max-width: 600px) {
  :root body .site-header { gap: 10px; padding: 0 16px; }
  :root body .site-header .brand { gap: 8px; font-size: 21px; }
  :root body .site-header .brand img { width: 18px; height: 25px; }
  :root body .site-header .header-actions { gap: 8px; }
  :root body .site-header .header-login { min-height: 36px; padding: 0 16px; font-size: 12px; }
}

:root body .site-header .brand .tb-brand-mark { display: block; width: 48px; height: 48px; flex: none; color: inherit; }
:root body .site-header .mobile-nav:not([hidden]) { max-height: calc(100svh - 84px); overflow-y: auto; }
:root body .site-header .mobile-nav a { line-height: 1.7; }
@media (max-width: 1100px) { :root body .site-header { height: 64px; padding-inline: 16px; } }

/* Blend each floating control with the pixels directly behind it.
   No parent stacking context: the menu panel keeps its normal white surface. */
@media (max-width: 1100px) {
  :root body .site-header { display: contents; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
  :root body .site-header :is(.brand, .header-actions, .mobile-nav) { pointer-events: auto; }
  :root body .site-header .brand,
  :root body .site-header .header-actions { position: fixed; z-index: 30; color: #fff; mix-blend-mode: difference; }
  :root body .site-header .brand { top: 8px; left: 16px; }
  :root body .site-header .header-actions { top: 10px; right: 16px; }
  :root body .site-header .brand,
  :root body .site-header .mobile-menu-button { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  :root body .site-header .brand .tb-brand-mark,
  :root body.enter-home .site-header .brand .tb-brand-mark { color: #fff; }
  :root body .site-header .mobile-nav:not([hidden]) { position: fixed; top: 72px; z-index: 31; }
}

/* Mobile controls keep a readable surface above every page and preview. */
@media (max-width: 1100px) {
  :root body .site-header { display: flex; position: fixed; inset: 0 0 auto; width: 100%; height: 64px; padding-inline: max(16px, env(safe-area-inset-left)); background: rgb(255 255 255 / .94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); pointer-events: auto; }
  :root body .site-header .brand, :root body .site-header .header-actions { position: static; color: #171717; mix-blend-mode: normal; }
  :root body .site-header .brand .tb-brand-mark, :root body.enter-home .site-header .brand .tb-brand-mark { color: inherit; }
  :root body .site-header .brand { min-width: 44px; min-height: 44px; }
  :root body .site-header .mobile-nav:not([hidden]) { top: 72px; left: auto; right: 16px; width: min(280px, calc(100vw - 32px)); max-height: calc(100dvh - 88px - env(safe-area-inset-bottom)); padding-bottom: max(8px, env(safe-area-inset-bottom)); overscroll-behavior: contain; }
}


/* The same SVG lettering on every public page, including its mobile menu. */
:root body .site-header a.gallery-invitation {
  color: #000; background: none; text-shadow: none; animation: none;
  -webkit-text-fill-color: currentColor; display: inline-flex; align-items: center;
}
:root body .site-header .open-gallery-wordmark {
  display: block; width: 174px; height: auto; overflow: visible; flex-shrink: 0;
}

/* Keep the LP brand and account controls legible on large displays. */
:root body .site-header .header-social-x{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none}
:root body .site-header .header-social-x svg{width:22px;height:22px}
@media(min-width:901px){
 :root body .site-header .brand .tb-brand-mark{width:clamp(56px,4vw,80px);height:clamp(56px,4vw,80px)}
 :root body .site-header .header-actions{gap:clamp(16px,1.2vw,28px)}
 :root body .site-header .header-social-x svg{width:clamp(22px,1.4vw,28px);height:clamp(22px,1.4vw,28px)}
 :root body .site-header .header-login{position:relative;min-height:48px;padding:0 0 0 clamp(20px,1.4vw,30px);border-radius:0;background:transparent;color:inherit;font-size:clamp(16px,1.1vw,22px);font-weight:600}
 :root body .site-header .header-login::before{content:'';position:absolute;left:0;top:25%;height:50%;width:1px;background:#e5e5e5}
}

:root body .site-header .header-login-desktop{display:inline-flex}

:root body .site-header .header-login.header-account{width:44px;height:44px;min-height:44px;flex:0 0 44px;padding:0;border-radius:50%}
:root body .site-header .header-account::before{content:none}
.site-header .public-account-photo{display:grid;place-items:center;position:relative;width:32px;height:32px;flex:none;border-radius:50%;overflow:hidden;color:inherit;line-height:1}
.site-header .public-account-photo>img{display:block;grid-area:1/1;width:100%;height:100%;object-fit:cover}
.site-header .public-account-photo>img[hidden]{display:none}
.site-header .public-account-photo>svg{grid-area:1/1;display:block;width:24px;height:24px}
.site-header .public-account-photo.has-account-photo>svg{display:none}

/* Prevent page-local typography from changing shared control geometry. */
:root body .site-header .desktop-nav a{line-height:1.5!important}
:root body .site-header .mobile-menu-button{line-height:1;border:0}
:root body .site-header .brand{width:auto;height:auto;padding:0}
:root body .site-header .header-actions{margin-left:0}
:root body .site-header .header-social-x{height:44px;padding:0}
:root body .site-header + main#gallery{padding-top:max(80px,5.555556vw)}
@media(max-width:1100px){:root body .site-header + main#gallery{padding-top:64px}}