/* Shared site chrome: brand logo + subline + nav (Resume · Projects · Articles)
   Extracted for pages that do not load splash styles.css (languages landing, care-map). */

:root {
  --chrome-indigo: #1e3a5f;
  --chrome-indigo-deep: #14283f;
  --chrome-ink-soft: #3d4a5c;
  --chrome-vermillion: #c45c4a;
  --chrome-sakura-deep: #e8a8b0;
  --chrome-font-display: "Shippori Mincho", "Noto Serif JP", Georgia, serif;
  --chrome-font-body: "Zen Kaku Gothic New", "Noto Sans JP", system-ui, sans-serif;
  --chrome-shadow: 0 12px 40px rgba(20, 40, 63, 0.08);
}

.site-header .header-inner,
.site-chrome .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--indigo-deep, var(--chrome-indigo-deep));
  min-width: 0;
  flex: 1 1 auto;
}

.brand:hover {
  color: var(--indigo-deep, var(--chrome-indigo-deep));
  text-decoration: none;
}

.brand-mark {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 8px;
}

.brand-text {
  font-family: var(--font-display, var(--chrome-font-display));
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  min-width: 0;
  color: inherit;
}

.brand-text > span:last-of-type {
  display: block;
  font-family: var(--font-body, var(--chrome-font-body));
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--ink-soft, var(--chrome-ink-soft));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.35;
  white-space: normal;
}

.site-chrome .nav,
.site-header .nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  justify-content: flex-end;
}

.site-chrome .nav a,
.site-header .nav a {
  font-family: var(--font-body, var(--chrome-font-body));
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-soft, var(--chrome-ink-soft));
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}

.site-chrome .nav a:hover,
.site-chrome .nav a[aria-current="page"],
.site-header .nav a:hover,
.site-header .nav a[aria-current="page"] {
  color: var(--indigo, var(--chrome-indigo));
  border-bottom-color: var(--sakura-deep, var(--chrome-sakura-deep));
}

.nav-toggle {
  border: 1.5px solid rgba(30, 58, 95, 0.2);
  background: white;
  border-radius: 10px;
  padding: 0.4rem 0.65rem;
  font-family: var(--font-body, var(--chrome-font-body));
  font-size: 0.85rem;
  color: var(--indigo, var(--chrome-indigo));
  cursor: pointer;
  display: none;
}

.nav.open {
  display: flex;
  position: absolute;
  right: 1.25rem;
  top: 3.6rem;
  flex-direction: column;
  background: #ffffff;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  box-shadow: var(--shadow, var(--chrome-shadow));
  z-index: 40;
  gap: 0.55rem;
}

@media (max-width: 860px) {
  .brand-mark {
    width: 36px;
    height: 36px;
  }
  .brand-text {
    font-size: 1rem;
  }
  .brand-text > span:last-of-type {
    font-size: 0.62rem;
    letter-spacing: 0.03em;
  }
  .nav-toggle {
    display: inline-flex;
    flex-shrink: 0;
  }
  .site-chrome .nav,
  .site-header .nav {
    display: none;
  }
  .site-chrome .nav.open,
  .site-header .nav.open {
    display: flex;
    left: 1rem;
    right: 1rem;
    top: calc(100% + 0.35rem);
    width: auto;
  }
}

@media (min-width: 861px) {
  .nav-toggle {
    display: none;
  }
}

/* Languages landing: keep drapes + page-lang/credits beside chrome nav */
.site-header .header-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem 1rem;
  margin-inline-start: 0;
  flex-shrink: 0;
}


/* Care-map: slim chrome bar above app banner */
.site-chrome {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(30, 58, 95, 0.08);
}
.site-chrome .header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.45rem 1rem;
}

/* Phone: one row sitewide (brand | Menu | actions/lang) */
@media (max-width: 860px) {
  .site-header .header-inner,
  .site-chrome .header-inner {
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    gap: 0.45rem 0.65rem;
  }
  .site-header .brand,
  .site-chrome .brand {
    flex: 1 1 auto;
    min-width: 0;
  }
  .site-header .header-actions,
  .site-chrome .header-actions {
    margin-inline-start: 0;
    flex-shrink: 0;
    gap: 0.45rem 0.65rem;
  }
  .nav-toggle {
    flex-shrink: 0;
  }
  /* Brand title + subline stay short so Menu/Credits fit beside */
  .brand-text {
    min-width: 0;
  }
  .brand-text > span:first-of-type,
  .brand-text > span:first-child {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .brand-text > span:last-of-type {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}