/* Shared header geometry and controls for every portfolio page. */
  /* --- Navigation ----------------------------------------------------- */
  .nav {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(14px);
    background: oklch(from var(--bg) l c h / 0.82);
    border-bottom: 1px solid var(--line);
  }
  .nav .nav-inner { max-width: 1180px; display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 20px; }
  .nav-back {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
    color: var(--text); font-size: 15px; font-weight: 600; text-decoration: none;
    border-radius: var(--r-control); transition: color 0.2s;
  }
  .nav-back:hover { color: var(--accent); }
  .nav-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
  .brand { display: flex; align-items: center; gap: 11px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); text-decoration: none; flex: none; }
  .brand .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--glow); }
  .nav-links { display: flex; gap: 28px; align-items: center; }
  .nav-links > a { font-family: var(--mono); font-size: 13px; color: var(--muted); text-decoration: none; transition: color 0.2s; position: relative; }
  .nav-links > a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
    background: var(--accent); transform: scaleX(0); transform-origin: 0 50%;
    transition: transform 0.32s var(--ease-out-soft);
  }
  .nav-links > a:hover { color: var(--text); }
  .nav-links > a:hover::after, .nav-links > a.active::after { transform: scaleX(1); }
  .nav-links > a.active { color: var(--accent); }
  .nav-right { display: flex; align-items: center; gap: 16px; flex: none; }
  .nav-cta {
    font-family: var(--mono); font-size: 13px; font-weight: 600; padding: 10px 20px; border-radius: var(--r-control);
    background: var(--accent); color: var(--on-accent); text-decoration: none;
    transition: box-shadow 0.25s, transform 0.25s var(--ease-spring);
    white-space: nowrap;
  }
  .nav-cta:hover { box-shadow: 0 0 26px var(--glow); }
  /* Hidden while an equivalent CTA is on screen (hero at the top, the plans
     section with its own buttons, the contact form at the bottom), so only one
     filled accent button competes at a time.
     Attribute is set by initNavCta() in interactions.js. */
  .nav[data-cta-redundant="1"] .nav-cta {
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity 0.3s var(--ease-out-soft), transform 0.3s var(--ease-out-soft);
  }
  .nav-cta { transition: opacity 0.3s var(--ease-out-soft), transform 0.3s var(--ease-spring), box-shadow 0.25s; }
  .theme-btn {
    background: none; border: 1px solid var(--line-strong); border-radius: 10px;
    width: 34px; height: 34px; padding: 0; cursor: pointer; color: var(--muted);
    display: inline-flex; align-items: center; justify-content: center;
    transition: color 0.2s, border-color 0.2s;
  }
  .theme-btn:hover { color: var(--text); border-color: var(--text); }
  /* Show the icon for the mode the click will switch TO. */
  .theme-btn .ic-sun { display: none; }
  .theme-btn .ic-moon { display: block; }
  :root[data-theme="light"] .theme-btn .ic-sun { display: block; }
  :root[data-theme="light"] .theme-btn .ic-moon { display: none; }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .theme-btn .ic-sun { display: block; }
    :root:not([data-theme="dark"]) .theme-btn .ic-moon { display: none; }
  }

  .lang-switch { display: inline-flex; align-items: center; gap: 6px; padding-left: 16px; border-left: 1px solid var(--line); }
  .lang-btn { background: none; border: none; padding: 0; font-family: var(--mono); font-size: 12px; color: var(--muted); cursor: pointer; letter-spacing: 0.04em; transition: color 0.18s; }
  .lang-btn:hover { color: var(--text); }
  .lang-btn.active { color: var(--accent); }
  .lang-sep { color: var(--faint); font-family: var(--mono); font-size: 12px; }

  .nav-burger {
    display: none; background: none; border: 1px solid var(--line-strong); border-radius: 10px;
    width: 40px; height: 40px; cursor: pointer; padding: 0;
    align-items: center; justify-content: center; flex-direction: column; gap: 4px;
  }
  .nav-burger span { display: block; width: 16px; height: 1.5px; background: var(--text); border-radius: 2px; transition: transform 0.3s var(--ease-out-soft), opacity 0.2s; }
  .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  .nav-panel {
    position: fixed; inset: 70px 0 0; z-index: 49;
    background: oklch(from var(--bg) l c h / 0.98); backdrop-filter: blur(20px);
    padding: 28px 32px 48px; overflow-y: auto;
  }
  .nav-panel[hidden] { display: none; }
  .nav-panel a {
    display: block; font-size: 26px; font-weight: 600; letter-spacing: -0.02em;
    color: var(--text); text-decoration: none; padding: 16px 0;
    border-bottom: 1px solid var(--line);
    animation: panelIn 0.45s var(--ease-out-soft) backwards;
  }
  .nav-panel a:nth-child(1) { animation-delay: 0.02s; }
  .nav-panel a:nth-child(2) { animation-delay: 0.06s; }
  .nav-panel a:nth-child(3) { animation-delay: 0.10s; }
  .nav-panel a:nth-child(4) { animation-delay: 0.14s; }
  .nav-panel a:nth-child(5) { animation-delay: 0.18s; }
  .nav-panel a:nth-child(6) { animation-delay: 0.22s; }
  .nav-panel a .k { font-family: var(--mono); font-size: 12px; color: var(--accent); display: block; margin-bottom: 4px; letter-spacing: 0.1em; }
  @keyframes panelIn { from { opacity: 0; transform: translateY(14px); } }

  @media (max-width: 900px) {
    .nav-links { display: none; }
    .nav-burger { display: inline-flex; }
    /* The bar CTA does not fit next to burger, theme and language switch, and it
       only duplicates item 06 of the panel. Hidden with display so it stops
       reserving width — opacity alone kept the row 112px too wide at 390px and
       made the whole page scroll sideways. */
    .nav-cta { display: none; }
  }
  @media (max-width: 460px) {
    .nav-cta { padding: 9px 15px; font-size: 12px; }
    .lang-switch { padding-left: 12px; }
  }


site-nav { display: contents; }

.skip-link { position: absolute; left: 12px; top: -100px; z-index: 100; background: var(--accent); color: var(--on-accent); font-family: var(--mono); font-size: 13px; font-weight: 600; padding: 12px 20px; border-radius: var(--r-control); text-decoration: none; }
.skip-link:focus { top: 12px; }