.skip-link { position: absolute; z-index: var(--z-overlay); top: var(--space-2); left: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--color-bg); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.site-header { border-bottom: var(--header-border); background: var(--color-bg); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-height: var(--header-height); padding-block: var(--space-3); }
.brand { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.brand-image { width: var(--brand-image-sp); height: var(--brand-image-sp); object-fit: contain; border-radius: var(--radius-pill); flex-shrink: 0; }
.brand-copy { display: flex; flex-direction: column; min-width: 0; }
.brand-name { font-size: var(--brand-font-sp); line-height: var(--line-height-tight); font-weight: var(--font-weight-bold); white-space: nowrap; letter-spacing: -.05em; }
.brand-tagline { font-size: var(--font-size-xs); line-height: var(--line-height-heading); margin-top: var(--space-1); }
.site-header .brand-tagline { display: none; }
.header-controls { display: flex; align-items: center; margin-left: auto; }
.menu-toggle { display: inline-flex; width: var(--control-height); min-height: var(--control-height); align-items: center; justify-content: center; background: transparent; border: 0; padding: var(--space-1); }
.menu-toggle { flex-direction: column; gap: var(--space-1); font-size: var(--font-size-xs); line-height: 1.2; }
.menu-toggle[hidden] { display: none; }
.menu-lines { width: 22px; height: 14px; border-top: 2px solid; border-bottom: 2px solid; position: relative; }
.menu-lines::after { content: ''; position: absolute; left: 0; top: 4px; width: 22px; border-top: 2px solid; }
.menu-toggle[aria-expanded="true"] .menu-lines { border-bottom: 0; transform: rotate(45deg); height: 2px; }
.menu-toggle[aria-expanded="true"] .menu-lines::after { top: -2px; transform: rotate(90deg); }
.global-navigation { width: 100%; order: 3; }
.global-navigation ul { padding-block: var(--space-3); }
.global-navigation li + li { border-top: var(--border-default); }
.global-navigation a, .global-navigation .pending-link { display: flex; align-items: center; min-height: var(--control-height); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.global-navigation .nav-featured { color: var(--color-link); }
.global-navigation [aria-current="page"] { color: var(--color-link); text-decoration: underline; text-underline-offset: 6px; }
.global-navigation a:hover, .footer-navigation a:hover, .footer-bottom a:hover { color: var(--color-link-hover); text-decoration: underline; text-underline-offset: 4px; }
.site-footer { border-top: var(--border-default); background: var(--footer-bg); padding-top: var(--space-6); }
.footer-inner { display: grid; gap: var(--space-6); }
.footer-brand .brand-image { width: var(--brand-image-pc); height: var(--brand-image-pc); }
.footer-brand .brand-name { font-size: var(--brand-font-footer); }
.footer-brand p { margin-top: var(--space-5); font-size: var(--font-size-sm); color: var(--color-text-sub); }
.footer-navigation ul { display: grid; grid-template-rows: repeat(3, auto); grid-auto-flow: column; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: var(--space-4); }
.footer-navigation a, .footer-navigation .pending-link { display: flex; align-items: center; min-height: var(--control-height); font-size: var(--font-size-sm); }
.social-links { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.social-links a { display: flex; align-items: center; justify-content: center; width: var(--control-height); height: var(--control-height); }
.social-links svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.social-links .icon-dot { fill: currentColor; stroke: none; }
.footer-bottom { border-top: var(--border-default); padding-block: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); color: var(--color-text-sub); }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.footer-bottom a { display: inline-flex; align-items: center; min-height: var(--control-height); font-size: var(--font-size-sm); }
.footer-bottom small { font-size: var(--font-size-xs); }
.editorial-transition { border: 1px solid #f0d8c5; background: var(--color-surface-warm); color: var(--color-text); }
@media (min-width: 768px) {
  .brand-image { width: var(--brand-image-pc); height: var(--brand-image-pc); }
  .brand-name { font-size: var(--brand-font-pc); }
  .site-header .brand-tagline { display: block; }
  .footer-inner { grid-template-columns: 1.2fr 1fr; }
  .footer-utility { grid-column: 1 / -1; max-width: 440px; width: 100%; }
  .footer-bottom { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
}
/* Keep the single mobile nav up to 1199px so the brand and five labels stay comfortable. */
@media (min-width: 1200px) {
  .header-inner { flex-wrap: nowrap; gap: var(--space-5); }
  .global-navigation { width: auto; order: 0; margin-left: auto; }
  .global-navigation ul { display: flex; gap: var(--space-4); padding: 0; }
  .global-navigation li + li { border: 0; }
  .global-navigation a, .global-navigation .pending-link { white-space: nowrap; font-size: var(--nav-font-pc); }
  .header-controls { margin: 0; }
  .menu-toggle { display: none; }
  .footer-inner { grid-template-columns: 1.3fr 1fr; gap: var(--space-7); }
  .footer-inner:has(.footer-utility) { grid-template-columns: 1.3fr 1fr auto; }
  .footer-navigation { border-left: var(--border-default); border-right: var(--border-default); padding-inline: var(--space-5); }
  .footer-navigation a, .footer-navigation .pending-link { min-height: 36px; font-size: var(--nav-font-pc); }
  .footer-utility { grid-column: auto; max-width: none; }
}