/* Approved desktop header, shared by the main portfolio and Project route.
   Existing controls, spacing and palette remain the source of its styling. */
@media (min-width: 601px) {
  :is(.poto-main, .poto-project) .poto-header {
    position: fixed;
    /* Above Project index (10), below career preview (18) and page curtain (30). */
    z-index: 11;
    top: 0;
    left: 0;
    right: 0;
    /* Equal top/bottom padding keeps the same total 72px header height. */
    padding: var(--poto-space-md) var(--poto-space-xl);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--poto-space-lg);
    color: var(--poto-ink);
    /* Local glass tint follows the section; global palette tokens stay intact. */
    --poto-header-tint: var(--poto-paper);
    background: transparent;
    isolation: isolate;
  }
  :is(.poto-main, .poto-project) .poto-header::before {
    content: ''; position: absolute; z-index: -1;
    inset: 0 0 calc(var(--poto-space-md) * -1);
    background: var(--poto-header-tint); pointer-events: none;
    -webkit-mask-image: linear-gradient(#000 calc(100% - var(--poto-space-md)), transparent);
    mask-image: linear-gradient(#000 calc(100% - var(--poto-space-md)), transparent);
    transition: opacity var(--poto-fast) var(--poto-ease), background-color var(--poto-fast) var(--poto-ease);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :is(.poto-main, .poto-project) .poto-header::before {
      background: color-mix(in srgb, var(--poto-header-tint) 48%, transparent);
      backdrop-filter: blur(var(--poto-space-sm));
      -webkit-backdrop-filter: blur(var(--poto-space-sm));
    }
  }
  :is(.poto-main, .poto-project) .header-primary { display: contents; }
  :is(.poto-main, .poto-project) .wordmark { justify-self: start; }
  :is(.poto-main, .poto-project) .main-nav {
    justify-self: center;
    flex-direction: row;
    align-items: center;
    gap: var(--poto-space-xl);
  }
  :is(.poto-main, .poto-project) .main-nav a::after { background: currentColor; }
  .poto-main .main-nav a[aria-current='location']::after { transform: scaleX(1); }
  :is(.poto-main, .poto-project) .header-meta { justify-self: end; }
  :is(.poto-main, .poto-project) .place-time time { color: inherit; }
  :is(.poto-main, .poto-project) .poto-header :focus-visible { outline-color: currentColor; }
  .poto-main .poto-header[data-header-surface='hero'] { color: var(--poto-paper); background: transparent; }
  .poto-main .poto-header[data-header-surface='hero']::before { opacity: 0; }
  .poto-main .poto-header[data-header-surface='dark'] { color: var(--poto-paper); --poto-header-tint: #000; }
  .poto-main .poto-header[data-header-surface='blue'] { color: var(--poto-paper); --poto-header-tint: var(--poto-blue-deep); }
  .poto-main .poto-header .theme-controls {
    max-width: calc(var(--poto-control-height) * 2 + var(--poto-space-xs));
    overflow: hidden; opacity: 1; visibility: visible;
    transition: max-width var(--poto-fast) var(--poto-ease), opacity var(--poto-fast) var(--poto-ease), visibility 0s;
  }
  .poto-main .poto-header[data-header-surface]:not([data-header-surface='hero']):not([data-header-surface^='project-']) .theme-controls {
    max-width: 0; opacity: 0; visibility: hidden; pointer-events: none;
    transition-delay: 0s, 0s, var(--poto-fast);
  }
  .poto-project .poto-header .theme-controls { display: flex; }
  .poto-main .poto-header .wordmark-logo { filter: brightness(0); }
  .poto-main .poto-header:is([data-header-surface='hero'], [data-header-surface='dark'], [data-header-surface='blue']) .wordmark-logo { filter: none; }
  .poto-main .poto-header .poto-button {
    color: inherit;
    border-color: currentColor;
    background: transparent;
  }
  .poto-main .poto-header .poto-button[aria-pressed='true'] {
    background: var(--poto-ink);
    color: var(--poto-paper);
    border-color: var(--poto-ink);
  }
  .poto-main .poto-header:is([data-header-surface='hero'], [data-header-surface='dark'], [data-header-surface='blue']) .poto-button[aria-pressed='true'] {
    color: var(--poto-paper);
    border-color: var(--poto-year-accent);
    background: var(--poto-glass);
  }
  .poto-main.is-passing:not(.is-opening) .poto-header { opacity: 1; transform: none; }
  .poto-main .a-hello {
    top: calc(var(--poto-space-lg) + var(--poto-control-height) + var(--poto-space-md));
    left: var(--poto-space-xl);
    transform: none;
  }
}

/* Intermediate desktop widths retain all controls in the same row. */
@media (min-width: 601px) and (max-width: 900px) {
  :is(.poto-main, .poto-project) .poto-header { padding: var(--poto-space-md); gap: var(--poto-space-md); }
  :is(.poto-main, .poto-project) .wordmark-logo { height: calc(var(--poto-control-height) * .53); }
  :is(.poto-main, .poto-project) .main-nav { gap: var(--poto-space-md); }
  :is(.poto-main, .poto-project) .main-nav a { font-size: .75rem; }
  :is(.poto-main, .poto-project) .header-meta { gap: var(--poto-space-sm); }
  .poto-main .a-hello { left: var(--poto-space-md); }
}

@media (prefers-reduced-motion: reduce) {
  :is(.poto-main, .poto-project) .poto-header { transition: none; }
  :is(.poto-main, .poto-project) .poto-header::before,
  .poto-main .poto-header .theme-controls { transition: none; }
}

/* Main story: opaque section-matched surfaces keep text frames continuous.
   Only the Archive needs light glass over moving artwork. */
@media (min-width: 601px) {
  .poto-main .poto-header[data-header-surface='dark'] {
    --poto-header-tint: var(--poto-header-dark);
  }
  .poto-main .poto-header::before {
    inset: 0;
    mask-image: none;
    -webkit-mask-image: none;
    background: var(--poto-header-tint);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .poto-main .poto-header[data-header-archive='true'] {
    --poto-header-tint: var(--archive-black, #000);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .poto-main .poto-header[data-header-archive='true']::before {
      background: color-mix(in srgb, var(--poto-header-tint) 48%, transparent);
      backdrop-filter: blur(var(--poto-space-xs));
      -webkit-backdrop-filter: blur(var(--poto-space-xs));
    }
  }
}

@media(min-width:601px) {
 .poto-main .poto-header[data-header-surface='project-dark'] { color:#fff; --poto-header-tint:#101010; }
 .poto-main .poto-header[data-header-surface='project-light'] { color:#101010; --poto-header-tint:#fff; }
 .poto-main .poto-header[data-header-surface='project-dark'] .wordmark-logo { filter:none; }
}
@media(min-width:601px) {
 .poto-main .poto-header[data-header-surface='project-dark'] .poto-button[aria-pressed='true'] { color:#fff; border-color:var(--poto-year-accent); background:var(--poto-glass); }
}