/*
 * Elaine / white canvas and component hierarchy.
 * Load after the existing homepage, case and interaction styles.
 * Project-cover palettes and image pixels are intentionally not recolored.
 */
:root{
 --theme-canvas:#ffffff;
 --theme-surface:#f6f7f4;
 --theme-toolbar:#fafbf9;
 --theme-selected:#edf1e6;
 --theme-hover:#f2f4ee;
 --theme-ink:#22251f;
 --theme-secondary:#6e746b;
 --theme-auxiliary:#979d93;
 --theme-line:#e3e6de;
 --theme-olive:#667852;
 --theme-selected-line:#c8d2bc;
 --theme-dark:#22251f;
 --paper:var(--theme-canvas);
 --ink:var(--theme-ink);
 --muted:var(--theme-secondary);
 --line:var(--theme-line);
 --accent:var(--theme-olive);
 --sketch-ink:var(--theme-olive);
}
html,body{background:var(--theme-canvas);color:var(--theme-ink)}
body.case-page{
 --case-paper:var(--theme-canvas);
 --case-ink:var(--theme-ink);
 --case-muted:var(--theme-secondary);
 --case-line:var(--theme-line);
 --case-accent:var(--theme-olive);
 background:var(--theme-canvas);
 color:var(--theme-ink);
}
::selection,.case-page ::selection{background:var(--theme-selected);color:var(--theme-ink)}
:focus-visible{outline-color:var(--theme-olive)}

/* Canvas, navigation and quiet separators. */
.site-header,.index-trigger,.navigation-dialog,.main-nav,
.aigc-section,.skills-section,#practice,.about-section{
 background:var(--theme-canvas);
}
.navigation-dialog{color:var(--theme-ink)}
.navigation-dialog::backdrop{background:rgba(34,37,31,.26)}
.main-nav{border-color:var(--theme-line)}
.main-nav a:first-child::before{border-color:var(--theme-olive);border-top-color:transparent}
.index-trigger>span::after{background:var(--theme-selected)}
.index-links>a>span>svg,.index-links>a:nth-child(3)>span>svg{color:var(--theme-olive)}
.index-links>a:hover,.index-links>a:focus-visible{color:var(--theme-olive)}
.index-email,.hero-meta,.section-heading{border-color:var(--theme-line)}
.index-note,.hero-note,.aigc-handnote,.skills-guide,.process-note{color:var(--theme-olive)}

/* The atelier PNG has a fully transparent perimeter; do not bleach its artwork. */
.hero-image,.hero-figure{background:transparent}
.hero-image img{background:transparent;mix-blend-mode:multiply;filter:none}

/* Covers keep their own butter / wine / sage compositions. Only the outer UI is neutral. */
.flow-card,.flow-card img,.project-image{background:transparent}
.flow-card{box-shadow:0 10px 24px rgba(34,37,31,.09)}
.flow-cursor{background:var(--theme-olive);color:#fff}
.work-filters button[aria-pressed=true]::after{border-color:var(--theme-olive)}
.flow-details #flow-scope,.project-number,.project-role,.project-tags{color:var(--theme-secondary)}

/* Gallery: images stay untouched; controls form one restrained green family. */
.aigc-open{background:var(--theme-surface)}
.aigc-media-tab,.aigc-filter,.aigc-autoplay{color:var(--theme-secondary)}
.aigc-media-tab[aria-selected=true],.aigc-filter[aria-pressed=true]{color:var(--theme-ink)}
.aigc-media-tab[aria-selected=true]::after{border-bottom-color:var(--theme-olive)}
.aigc-filter[aria-pressed=true]{border-bottom-color:var(--theme-olive)}
.aigc-filter:hover,.aigc-autoplay:hover{color:var(--theme-olive)}
.aigc-medium,.aigc-preview-note,.aigc-duration,.aigc-image-count{color:var(--theme-secondary)}
.aigc-tab-count{color:var(--theme-auxiliary)}
.aigc-play,.aigc-carousel-nav,.aigc-slide-status{
 background:var(--theme-canvas);color:var(--theme-ink);
}
.aigc-carousel-nav:hover,.aigc-play:hover{background:var(--theme-selected)}
.art-peek{background:var(--theme-olive);color:#fff}
.aigc-media-tab:focus-visible,.aigc-open:focus-visible,
.aigc-filter:focus-visible,.aigc-autoplay:focus-visible,
.aigc-carousel-nav:focus-visible{outline-color:var(--theme-olive)}

/* Shared hover highlight, selected type and the capability preview. */
.skill-highlight{background:var(--theme-selected)}
.skill-symbol{color:var(--theme-olive)}
.skill-label small,.skill-category{color:var(--theme-secondary)}
.skill-index{color:var(--theme-auxiliary)}
.skill-item[aria-selected=true] .skill-index{color:var(--theme-olive)}
.skill-item:focus-visible{outline-color:var(--theme-olive)}
.practice-frame,
.practice-frame[data-visual=interface],
.practice-frame[data-visual=visual]{background:var(--theme-surface)}
.practice-word{color:var(--theme-ink)}
.practice-window,.practice-detail{background:var(--theme-canvas);box-shadow:0 10px 28px rgba(34,37,31,.09)}
.practice-window-head{background:var(--theme-toolbar);color:var(--theme-secondary)}
.practice-window-dots i{background:#d2d8cc}
.practice-image-stack{background:var(--theme-canvas)}
.practice-image-note{background:var(--theme-canvas);color:var(--theme-olive)}
.practice-open-cue{background:var(--theme-canvas);color:var(--theme-ink)}
.practice-frame:has(.practice-image-hit:hover) .practice-open-cue{background:var(--theme-selected)}
#practice-caption,.practice-item-methods,
.practice-item:not(.is-active) .practice-item-note,
.practice-item:not(.is-active) .practice-item-methods{color:var(--theme-secondary)}
.practice-number{color:var(--theme-auxiliary)}
.practice-item.is-active .practice-number{color:var(--theme-olive)}
#practice .practice-tabs button{color:var(--theme-secondary)}
#practice .practice-tabs button[aria-selected=true]{color:var(--theme-ink)}
#practice .practice-tabs button[aria-selected=true] .practice-name em{color:var(--theme-olive)}
.practice-image-hit:focus-visible{outline-color:var(--theme-olive)}

/* Case-page chrome and the screenshot library. */
.case-header,.case-footer,.case-next{border-color:var(--theme-line)}
.case-cover{background:transparent;border-color:transparent}
.case-cover-image{background:transparent}
.case-chapters{background:var(--theme-canvas);border-block-color:var(--theme-line);backdrop-filter:none}
.case-chapter{color:var(--theme-secondary)!important}
.case-chapter[aria-current]{color:var(--theme-ink)!important}
.case-chapter[aria-current]::after{background:var(--theme-olive)}
.case-section+.case-section{border-top:0}
.case-flow-item,.case-contribution-list li{border-color:var(--theme-line)}
.case-flow-number{color:var(--theme-olive)}
.case-section-description,.case-flow-description,.case-cover-caption,
.case-screen-count,.case-screen-state,.case-screen-empty,.case-coverage,
.case-scene-status{color:var(--theme-secondary)}
.case-eyebrow,.case-label,.case-meta-item dt,.case-work-number{color:var(--theme-secondary)}
.case-screen-number{color:var(--theme-auxiliary)}
.case-lab-frame{background:transparent;border:0;padding:0}
.case-screen-filter{background:var(--theme-canvas);color:var(--theme-secondary);border-color:var(--theme-line)}
.case-screen-filter[aria-pressed=true]{
 background:var(--theme-selected);color:var(--theme-ink);border-color:var(--theme-selected-line);
}
.case-screen-filter:hover:not([aria-pressed=true]){background:var(--theme-hover);color:var(--theme-ink)}
.case-screen-open{background:var(--theme-surface);border-color:var(--theme-line)}
.case-screen-zoom{background:var(--theme-canvas);color:var(--theme-ink);border-color:var(--theme-line)}
.case-screen-source,.case-footer-back{border-color:var(--theme-line)}
.case-next-image{background:transparent}

/* Local product previews: canvas > panel > toolbar > input > selected state. */
.px-experience{
 --px-ink:var(--theme-ink);
 --px-muted:var(--theme-secondary);
 --px-line:var(--theme-line);
 --px-wash:var(--theme-selected);
 --px-paper:var(--theme-surface);
 color:var(--theme-ink);
}
.px-panel{background:var(--theme-surface);border-color:var(--theme-line);box-shadow:0 10px 30px -22px rgba(34,37,31,.16)}
.px-toolbar{background:var(--theme-toolbar);color:var(--theme-secondary)}
.px-status-dot{background:var(--theme-olive)}
.px-kicker,.px-handnote,.px-scene-rail small,
.px-demo label,.px-style-label,.px-local-note,.px-footnote,
.px-format-description,.px-model-selection,
.px-record p:not(.px-kicker),.px-output-value>span{color:var(--theme-secondary)}
.px-number,.px-model-cards button>span,.px-model-cards small,
.px-dimension-fields>span{color:var(--theme-auxiliary)}
.px-scene-rail>button{background:transparent;border-color:var(--theme-line)}
.px-scene-rail>button:hover:not([aria-selected=true]){background:var(--theme-hover)}
.px-scene-rail>button[aria-selected=true]{
 background:var(--theme-selected);box-shadow:inset 3px 0 0 var(--theme-olive);
}
.px-scene-rail>button[aria-selected=true] .px-number{color:var(--theme-olive)}
.px-segment{background:#f0f2ed}
.px-segment button{color:var(--theme-secondary)}
.px-segment button[aria-pressed=true]{
 background:var(--theme-canvas);color:var(--theme-ink);box-shadow:0 1px 3px rgba(34,37,31,.07);
}
.px-segment button:hover:not([aria-pressed=true]){background:var(--theme-hover);color:var(--theme-ink)}
.px-demo textarea,
.px-demo input:not([type=checkbox]):not([type=range]),
.px-demo select{background:var(--theme-canvas);color:var(--theme-ink);border-color:var(--theme-line)}
.px-demo input::placeholder,.px-demo textarea::placeholder{color:var(--theme-secondary);opacity:.82}
.px-toggle input{accent-color:var(--theme-olive)}
.px-chips button,.px-format-options button,.px-model-cards button{
 background:var(--theme-canvas);color:var(--theme-secondary);border-color:var(--theme-line);
}
.px-chips button[aria-pressed=true],.px-format-options button[aria-pressed=true],
.px-model-cards button[aria-pressed=true]{
 background:var(--theme-selected);color:var(--theme-ink);border-color:var(--theme-selected-line);
}
.px-chips button:hover:not([aria-pressed=true]),
.px-format-options button:hover:not([aria-pressed=true]),
.px-model-cards button:hover:not([aria-pressed=true]){background:var(--theme-hover)}
.px-evidence-image{background:var(--theme-canvas)}
.px-record,.px-output-evidence{background:var(--theme-surface)}
.px-vinyl i{background:var(--theme-surface)}
.px-tool-links a{background:var(--theme-canvas);color:var(--theme-ink)}
.px-tool-links a:hover,.px-tool-links a:focus-visible{background:var(--theme-selected)}
.px-footnote a{color:var(--theme-ink)}
.px-comparison{background:var(--theme-surface)}
.px-comparison:focus-within{outline-color:var(--theme-olive)}
.px-experience button:focus-visible,.px-experience a:focus-visible,
.px-experience input:focus-visible,.px-experience textarea:focus-visible,
.px-experience select:focus-visible{outline-color:var(--theme-olive)}

/* Older project dialogs remain consistent if reached through a legacy control. */
.project-dialog,.dialog-top,.project-media-tabs{background:var(--theme-canvas);color:var(--theme-ink)}
.dialog-top,.dialog-meta,.dialog-bottom{border-color:var(--theme-line)}
.icon-button:hover{background:var(--theme-selected)}
.dialog-visual{background:var(--theme-surface)}
.project-media-tabs button{color:var(--theme-secondary)}
.project-media-tabs button[aria-pressed=true]{color:var(--theme-ink);border-color:var(--theme-olive)}
.toast{background:var(--theme-ink);color:#fff;border-color:#4f5748}

/* Dark media viewers and the contact section are deliberate, contained dark surfaces. */
.art-dialog,.case-lightbox{background:#191c17;color:#fff}
.art-dialog::backdrop,.case-lightbox::backdrop{background:#191c17}
.art-video{background:#121510}
.art-dialog button:focus-visible,.case-lightbox :focus-visible{outline-color:#c5d3b5}
.contact-section{background:var(--theme-dark);color:#fff}
.contact-seam::after{background:var(--theme-canvas)}
.contact-email,.copy-email,.contact-footer{color:#fff}
.contact-footer{border-top-color:rgba(255,255,255,.18)}
.contact-arrow{background:var(--theme-selected);color:var(--theme-ink)}
.contact-arrow:hover{background:#fff}
.contact-arrow:focus-visible,.copy-email:focus-visible,.contact-email:focus-visible{outline-color:#c5d3b5}

/* Color hierarchy remains intact in narrow stacked layouts. */
@media(max-width:700px){
 .px-scene-rail>button[aria-selected=true]{box-shadow:inset 0 -2px 0 var(--theme-olive)}
 .px-scene-rail>button{border-color:var(--theme-line)}
}
@media(max-width:640px){
 .main-nav,.navigation-dialog,.index-trigger,.case-chapters{background:var(--theme-canvas)}
 .practice-frame,.practice-frame[data-visual=interface],.practice-frame[data-visual=visual]{background:var(--theme-surface)}
 .practice-image-note,.practice-open-cue{background:var(--theme-canvas)}
 .skill-highlight{background:var(--theme-selected)}
}

/* Keep supporting copy readable on the tinted interaction states. */
.px-panel{--theme-secondary:#62695e}.px-scene-rail>button[aria-selected=true] small,.skill-item[aria-selected=true] .skill-label small,.skill-item:hover .skill-label small{color:#62695e}

/* Fit the wider painted scene without changing the hero copy or its motion layers. */
@media(min-width:1201px){
 #home .hero-image>img.hero-cosmic-art{transform:translateX(8.4%) scale(.82);transform-origin:top left}
}