/* Shared identity and theme, without recolouring project photography. */
:root {
    color-scheme: light;
}

.portfolio-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    padding: 20px max(32px, calc((100vw - 1280px)/2)) 0;
}

.header-name {
    justify-self: start;
    pointer-events: auto;
    color: #737373;
    font: 400 18px/1.4 Inter, Arial, sans-serif;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 280ms cubic-bezier(.22, 1, .36, 1), color 180ms ease;
}

.header-name span {
    display: inline-block;
    margin-left: 5px;
}

.theme-toggle {
    justify-self: end;
    pointer-events: auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #737373;
    cursor: pointer;
    transition: opacity 280ms cubic-bezier(.22, 1, .36, 1), background 180ms ease, color 180ms ease;
}

.portfolio-header.scrolled-hide :is(.header-name, .theme-toggle) {
    opacity: 0;
    pointer-events: none;
}

.portfolio-header.scrolled-hide :is(.header-name, .theme-toggle):focus-visible {
    opacity: 1;
    pointer-events: auto;
}

.theme-toggle:hover {
    background: #eeeeee;
}

.theme-toggle svg {
    width: 24px;
    height: 24px;
}

.theme-sun {
    display: none;
}

[data-theme="dark"] {
    color-scheme: dark;
}

[data-theme="dark"] body {
    background: #171719;
    color: #eeeeef;
}

[data-theme="dark"] .theme-moon {
    display: none;
}

[data-theme="dark"] .theme-sun {
    display: block;
}

[data-theme="dark"] :is(.header-name, .theme-toggle) {
    color: #c8c8cc;
}

[data-theme="dark"] .nav-segments {
    background: #303034;
}

[data-theme="dark"] .portfolio-nav a {
    color: #b6b6bd;
}

[data-theme="dark"] .portfolio-nav a[aria-current] {
    background: #48484f;
    color: #fff;
}

[data-theme="dark"] .portfolio-nav a:hover {
    color: #fff;
}

[data-theme="dark"] .portfolio-nav .nav-resume {
    background: #ededf0;
    color: #202023;
}

[data-theme="dark"] .portfolio-nav .nav-resume:is(:hover, :focus-visible) {
    background: #ededf0;
    color: #202023;
}

[data-theme="dark"] :is(.about-copy p, .personal-intro-copy p, .practice, .replay, .jobs time, .jobs details p, .stack-experience h2, .stack-icons span, .case-back, .case-tagline, .case-summary, .case-facts dt, .context-copy p, .story-section p, .case-footer, .journey-diagram, .journey-year, .work h3 span, .copy-status) {
    color: #bcbcc4;
}

[data-theme="dark"] :is(.experience-title, .case-end a, .case-footer a) {
    color: #eeeeef;
}

[data-theme="dark"] :is(.about-section, .case-facts, .jobs details, .case-end) {
    border-color: #3a3a40;
}

[data-theme="dark"] :is(.hero-actions a, .motion-toggle, .testimonial, .footer-email-group, .footer-email, .footer-ball, .project-caption, .card-arrow) {
    background: #29292f;
    color: #eee;
    border-color: #45454c;
}

[data-theme="dark"] :is(.hero-actions a:hover, .theme-toggle:hover, .copy-email:hover) {
    background: #38383f;
    color: #fff;
}

[data-theme="dark"] :is(.contact-card, .flow-screens, .screen-frame) {
    background: #222227;
}

[data-theme="dark"] .screen-frame {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] :is(.testimonial blockquote p, .testimonial figcaption strong, .project-caption p, .copy-email, .footer-orb) {
    color: #dddde2;
}

[data-theme="dark"] :is(.testimonial figcaption span, .contact-label) {
    color: #bcbcc4;
}

[data-theme="dark"] .journey-steps span {
    border-color: #65656d;
}

[data-theme="dark"] .journey-note {
    color: #ff6478;
}

[data-theme="dark"] .design-engineer-diagram g[fill="#444"] {
    fill: #dddde2;
}

[data-theme="dark"] .design-engineer-diagram g[stroke="#d1d1d1"] {
    stroke: #73737c;
}

[data-theme="dark"] .design-engineer-diagram circle[fill="#ededed"] {
    fill: #39393f;
}

/* Product stages and white photo prints retain their original colours. */
[data-theme="dark"] :is(.child-stage,.parent-stage,.parent-pair,.saving-visual) figcaption { color:#555; }
[data-theme="dark"] .portfolio-header { background: #161618; }
[data-theme="dark"] .portfolio-header.scrolled { border-bottom-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .mobile-menu-btn, [data-theme="dark"] .mobile-menu-close { color: #f0f0f2; }
[data-theme="dark"] .mobile-menu-overlay { background: #161618; color: #f0f0f2; }
[data-theme="dark"] .mobile-menu-top { border-bottom-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .mobile-menu-links a { color: #f0f0f2; }
[data-theme="dark"] .mobile-resume-btn { background: #ededf0; color: #202023; }

@media(min-width:768px) and (max-width:900px) {
 .portfolio-header { grid-template-columns:1fr auto; gap:12px; padding:14px 16px 0; }
 .portfolio-nav { grid-column:1 / -1; grid-row:2; justify-self:center; }
 .theme-toggle { grid-column:2; grid-row:1; }
 .header-name { font-size:16px; display:inline-flex; align-items:center; min-height:44px; }
}