/* One light header across three services; page palettes remain independent.
   Two tiers (2026-09-27): a 28px service bar (group sites + JP/EN) above the 60px site-menu row.
   Type stays at --type-nav (.79rem), 400 weight, UI face; current/open items read as vermilion + underline only. */
body .site-header.ecosystem-header {
  box-sizing:border-box;
  --ink:#272a29; --ink-dim:#5c6463; --ink-line:#dce0dd;
  --aka:#9e2b25; --aka-faint:#f8eeee; --paper:#fff; --washi:#faf9f5;
  color-scheme:light; background:#fff; color:var(--ink); border-bottom:1px solid var(--ink-line);
  z-index:100; gap:0 24px;
}
.ecosystem-header .brand { color:var(--ink); }
.ecosystem-header .brand .wordmark .ja { font-size:1rem; }
.ecosystem-header .brand .wordmark .en { color:var(--ink-dim); font-size:.5rem; letter-spacing:.12em; }

/* Upper tier: the full-width band is a grid item drawn by ::before (row 1, all columns);
   .service-bar (columns 1-2) and .language-switch (column 3) sit on top of it. */
.site-header.ecosystem-header::before { content:''; grid-area:1/1/2/-1; align-self:stretch; margin:0 calc(-1 * var(--studio-gutter)); background:var(--washi); border-bottom:1px solid var(--ink-line); }
.ecosystem-header .service-bar { grid-area:1/1/2/3; position:relative; z-index:1; display:flex; align-items:center; gap:22px; min-height:28px; font-family:var(--font-ui); font-size:.68rem; letter-spacing:.06em; color:var(--ink-dim); white-space:nowrap; }
.ecosystem-header .service-bar-label { font-size:.64rem; letter-spacing:.16em; color:var(--ink-dim); }   /* ink-dim on washi ≈ 5.8:1 (AA); no opacity */
.ecosystem-header .service-link { color:inherit; text-decoration:none; padding:5px 0; line-height:1.4; border-bottom:1px solid transparent; }
.ecosystem-header .service-bar .service-link:hover { color:var(--ink); }
.ecosystem-header .service-bar .service-link[aria-current="true"] { color:var(--ink); border-bottom-color:var(--ink); }
.ecosystem-header .language-switch { padding-left:16px; border-left:1px solid var(--ink-line); }
.ecosystem-header .language-switch button { min-height:24px; padding:2px 3px; font-size:.66rem; letter-spacing:.1em; }
.ecosystem-header.header-compact .language-switch button { min-height:40px; min-width:36px; padding:4px 6px; font-size:.7rem; }   /* compact: a real tap target beside the hamburger (WCAG 2.5.8) */

/* Lower tier: product categories (dropdowns) | divider | how-to links | utilities. */
body .ecosystem-header .site-nav { gap:clamp(16px,1.8vw,28px); font-size:var(--type-nav); font-weight:400; }
.ecosystem-header .nav-group { display:flex; align-items:center; gap:inherit; }
.ecosystem-header .nav-drawer-only { display:none; }
.ecosystem-header .nav-divider { width:1px; height:16px; background:var(--ink-line); }
.ecosystem-header .nav-menu { position:relative; margin:0; border:0; padding:0; }
.ecosystem-header .nav-trigger {
  display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0; list-style:none; cursor:pointer;
  color:var(--ink); font:inherit; letter-spacing:inherit; white-space:nowrap; border-bottom:2px solid transparent;
}
.ecosystem-header .nav-trigger::-webkit-details-marker { display:none; }
.ecosystem-header .nav-trigger::after { content:''; width:5px; height:5px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .15s; }
.ecosystem-header .nav-menu[open] > .nav-trigger::after { transform:translateY(1px) rotate(225deg); }
/* 美術印刷 is told apart by a 5px vermilion diamond only (no serif, no weight, no badge). */
.ecosystem-header .nav-menu[data-menu="art"] > .nav-trigger::before { content:''; flex:none; width:5px; height:5px; background:var(--aka); transform:rotate(45deg); }
.ecosystem-header .nav-trigger:hover,
.ecosystem-header .nav-menu[open] > .nav-trigger,
.ecosystem-header .nav-menu.nav-current > .nav-trigger,
.ecosystem-header .nav-trigger[aria-current="true"],
.ecosystem-header .nav-group--guide > a:hover,
.ecosystem-header .nav-group--guide > a[aria-current="page"] { color:var(--aka); border-bottom-color:var(--aka); }
body .ecosystem-header .nav-group--guide > a { display:inline-flex; align-items:center; min-height:44px; padding:0; color:var(--ink); font:inherit; letter-spacing:inherit; border-bottom:2px solid transparent; white-space:nowrap; text-decoration:none; }
.ecosystem-header .nav-panel {
  position:absolute; top:100%; left:0; z-index:5; min-width:240px; padding:10px 0;
  background:var(--paper); border:1px solid var(--ink-line); box-shadow:0 12px 28px rgba(39,42,41,.08);
  max-height:calc(100dvh - var(--header-height) - 24px); overflow:auto;
}
.ecosystem-header .nav-panel.nav-panel--flip { left:auto; right:0; }   /* header.js adds this when the panel would overflow the viewport */
body .ecosystem-header .nav-panel a { display:block; margin:0; padding:9px 18px; border:0; border-radius:0; color:var(--ink); font-family:var(--font-ui); font-size:var(--type-nav); font-weight:400; line-height:1.6; letter-spacing:.03em; white-space:nowrap; text-decoration:none; }
body .ecosystem-header .nav-panel a:hover,
body .ecosystem-header .nav-panel a[aria-current="page"] { color:var(--aka); background:var(--aka-faint); }
body .ecosystem-header .nav-panel .nav-panel-more { margin-top:6px; border-top:1px solid var(--ink-line); padding-top:12px; color:var(--ink-dim); }
.ecosystem-header .nav-panel--columns { display:grid; grid-template-columns:repeat(3,minmax(200px,auto)); gap:0 8px; padding:14px 8px 12px; max-width:calc(100vw - 24px); }
body .ecosystem-header .nav-column a { white-space:normal; }   /* long EN links wrap instead of pushing the 3 columns past the viewport */
.ecosystem-header .nav-column { min-width:0; margin:0; padding:0; }
.ecosystem-header .nav-column h3 { margin:0; padding:6px 18px 4px; font-family:var(--font-ui); font-weight:400; font-size:.66rem; letter-spacing:.14em; color:var(--ink-dim); }
/* Gallery member controls keep their markup inside .nav-panel (site.js reads .owners-link). */
body .site-header.ecosystem-header .site-nav .nav-panel .owners-link { display:block; width:100%; height:auto; min-height:0; margin:0; padding:9px 18px; font-family:var(--font-ui); font-size:var(--type-nav); font-weight:400; line-height:1.6; letter-spacing:.03em; text-align:left; border:0 !important; border-radius:0; color:var(--ink) !important; }
.ecosystem-header .nav-panel .owner-name { display:block; padding:9px 18px; font-size:.78rem; overflow-wrap:anywhere; }
.ecosystem-header .nav-panel .logout-form { display:block; margin:0; }
.ecosystem-header .nav-panel .logout-form button { background:none; border:0; padding:9px 18px; font:inherit; color:var(--ink); cursor:pointer; }
.ecosystem-header .header-utilities { display:flex; align-items:center; gap:18px; margin-left:10px; }
body .ecosystem-header #auth-nav { display:flex; padding:0; gap:0; }
body .ecosystem-header #auth-nav > a,
body .ecosystem-header .header-account { display:inline-flex; align-items:center; min-height:40px; padding:0; border:0; border-radius:0; color:var(--ink); background:none; font:inherit; font-size:.78rem; letter-spacing:.035em; white-space:nowrap; }
body .ecosystem-header #auth-nav > a:hover { color:var(--aka); background:none; }
body .ecosystem-header .header-icon { display:flex; align-items:center; justify-content:center; width:32px; height:40px; margin:0; padding:0; border:0; color:var(--ink); }
.ecosystem-header .header-icon svg { display:block; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.3; }
/* Focus stays visible on every control in both tiers. */
.ecosystem-header :is(.service-link,.nav-trigger,.nav-panel a,.nav-group--guide > a,.header-icon,#auth-nav a,.header-account,.nav-panel .logout-form button):focus-visible { outline:2px solid var(--aka); outline-offset:2px; }

/* 1121–1320px: type stays .79rem; only the spacing tightens. */
@media (min-width:1121px) and (max-width:1320px) {
  body .ecosystem-header .site-nav { gap:16px; }
  .ecosystem-header .header-utilities { gap:14px; margin-left:4px; }
  .ecosystem-header .service-bar { gap:16px; }
  .site-header.ecosystem-header::before { margin:0 -28px; }   /* header padding is a fixed 28px here (design-system.css), not var(--studio-gutter) */
}

/* Compact (≤1120px or overflow): the service bar hides, its links move into the drawer's "group services". */
.ecosystem-header.header-compact::before,
.ecosystem-header.header-compact .service-bar { display:none; }
body .ecosystem-header.header-compact .site-nav { background:#fff; padding:8px 24px 36px; }
.ecosystem-header.header-compact .nav-group { flex-direction:column; align-items:stretch; gap:0; }
.ecosystem-header.header-compact .nav-drawer-only { display:block; }
.ecosystem-header.header-compact .nav-label { display:block; padding:18px 4px 6px; font-size:.66rem; letter-spacing:.18em; color:var(--ink-dim); }
.ecosystem-header.header-compact .nav-divider { display:none; }
.ecosystem-header.header-compact .nav-menu { border-bottom:1px solid var(--ink-line); }
.ecosystem-header.header-compact .nav-trigger { display:flex; justify-content:flex-start; gap:10px; min-height:0; padding:16px 4px; font-size:.95rem; border-bottom:0; }
.ecosystem-header.header-compact .nav-trigger::after { margin-left:auto; }
.ecosystem-header.header-compact .nav-panel { position:static; min-width:0; max-height:none; padding:0 0 12px; border:0; box-shadow:none; background:var(--washi); }
.ecosystem-header.header-compact .nav-panel.nav-panel--flip { left:auto; right:auto; }
body .ecosystem-header.header-compact .nav-panel a { padding:12px 18px; font-size:.9rem; white-space:normal; }
.ecosystem-header.header-compact .nav-panel--columns { display:block; padding:0 0 12px; }
body .ecosystem-header.header-compact .nav-group--guide > a { display:block; min-height:0; padding:14px 4px; font-size:.95rem; border-bottom:1px solid var(--ink-line); }
.ecosystem-header.header-compact .nav-group--services .service-link { display:block; padding:11px 4px; font-size:.84rem; color:var(--ink-dim); border:0; }
.ecosystem-header.header-compact .nav-group--services .service-link[aria-current="true"] { color:var(--ink); }
.ecosystem-header.header-compact .header-utilities { margin:20px 0 0; gap:22px; }
body .site-header.ecosystem-header.header-compact .site-nav .nav-panel .owners-link,
body .ecosystem-header.header-compact .nav-panel .owner-name { margin:0; padding:12px 18px; width:100%; max-width:none; }
@media (max-width:640px) {
  body .site-header.ecosystem-header { gap:0 10px; }
  .ecosystem-header .brand .wordmark .ja { font-size:.82rem; }
  .ecosystem-header .brand .wordmark .en { font-size:.42rem; letter-spacing:.06em; }
}
@media (prefers-reduced-motion:reduce) {
  .ecosystem-header .nav-trigger::after, body .ecosystem-header.header-compact .site-nav { transition:none; }
}

/* The same account cart badge on print and gallery, including compact navigation. */
body .ecosystem-header .cart-count {
  display: inline-block;
  flex-shrink: 0;
  min-width: 18px;
  height: 18px;
  margin-left: 7px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--aka);
  color: #fff;
  font-family: var(--font-ui);
  font-size: .68rem;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  letter-spacing: 0;
}
body .ecosystem-header .cart-count[hidden] { display: none; }