/* Shared editorial foundation; atmosphere and project-specific palettes below. */
:root {
  --editorial-bg: #080808;
  --editorial-surface: #101010;
  --editorial-raised: #171716;
  --editorial-text: #f2f0eb;
  --editorial-muted: #aaa8a3;
  --editorial-quiet: #8c8a85;
  --editorial-line: #f2f0eb24;
  --editorial-accent: #ff744d;
  --bg: var(--editorial-bg);
  --ink: var(--editorial-bg);
  --surface: var(--editorial-surface);
  --panel: var(--editorial-surface);
  --text: var(--editorial-text);
  --paper: var(--editorial-text);
  --muted: var(--editorial-muted);
  --line: var(--editorial-line);
  --accent: var(--editorial-accent);
  --orange: var(--editorial-accent);
  --blue: #4359f5;
  --violet: #b4a0ee;
}
html, body, body.fp-body { background: var(--editorial-bg); color: var(--editorial-text); }
::selection { background: var(--editorial-accent); color: var(--editorial-bg); }

/* Match the photograph's bottom edge to the service ribbon and page canvas. */
.cx-photo-hero { background: var(--editorial-bg); }
.cx-photo-hero::after {
  content: ''; position: absolute; z-index: 2; inset: auto 0 0; height: 95px;
  background: linear-gradient(transparent, var(--editorial-bg)); pointer-events: none;
}
.cx-service-band { background: var(--editorial-bg); border-color: var(--editorial-line); }
.cx-band-heading { border-color: #f2f0eb12; color: var(--editorial-quiet); }
.cx-motion-toggle, .cx-service-rail small { color: var(--editorial-muted); }
.cx-service-rail a, .cx-service-rail a:last-child { border-color: var(--editorial-line); }
.cx-service-rail strong { color: var(--editorial-text); }
.cx-rail-index { color: var(--editorial-quiet); }
.cx-service-rail a:hover, .cx-service-rail a:focus-visible { background: #f2f0eb04; }
.cx-service-rail a:hover strong { color: var(--editorial-accent); }
.cx-photo-hero :is(.cx-editorial-kicker, .cx-editorial-summary, .cx-editorial-action > p, .cx-photo-focus li, .cx-photo-signature span, .cx-focus-label) { color: var(--editorial-muted); }

/* The same editorial hierarchy continues below the hero. */
main > .section h2 em { color: var(--editorial-accent); }
.eyebrow, .portrait-caption { color: var(--editorial-muted); }
.step { color: #746d66; }
.process-grid article:hover .step { color: var(--editorial-accent); }
.tags span { color: #c6c3bd; border-color: var(--editorial-line); }
.about-image { background: var(--editorial-surface); border-color: var(--editorial-line); }
.archive-link a, .text-link { border-color: #f2f0eb50; }
.timeline article:hover { background: #f2f0eb04; }
.contact-section { background: transparent; }
.footer { background: var(--editorial-bg); }

/* Project reel: the work sits inside the shared atmospheric canvas. */
#work { background: var(--editorial-bg); }
.work-reel-label, .work-reel-foot, .project-topline { color: var(--editorial-quiet); }
.work-reel-controls button, .work-reel-controls button:disabled { background: var(--editorial-surface); color: var(--editorial-text); border-color: #f2f0eb35; }
.work-reel-controls button:hover:not(:disabled) { background: var(--editorial-accent); border-color: var(--editorial-accent); color: var(--editorial-bg); }
#work .project-art { background: var(--editorial-surface); border-color: var(--editorial-line); }
#work .project-art::before { background: radial-gradient(circle at var(--px, 50%) var(--py, 50%), #f2f0eb0c, transparent 66%); }
#work .project-art::after { background: linear-gradient(180deg, transparent 55%, #080808ae); }
#work .project-card.is-current .project-art { box-shadow: 0 25px 60px #0008; border-color: #ff744d66; }
#work .project-meta p, #work .project-description { color: var(--editorial-muted); }
.pc-cover-top, .pc-cover-bottom { color: var(--editorial-muted); }

/* The frame follows each case study; its original art direction stays intact. */
#project-dialog { --case-accent: #ff744d; --case-rgb: 255,116,77; --case-chrome: #100e0df5; }
#project-dialog.sports-project { --case-accent: #ff986e; --case-rgb: 255,152,110; --case-chrome: #16120ff5; }
#project-dialog.web-project { --case-accent: #78dfff; --case-rgb: 120,223,255; --case-chrome: #09141bf5; }
#project-dialog.posters-project { --case-accent: #b5a0ff; --case-rgb: 181,160,255; --case-chrome: #141021f5; }
#project-dialog.motion-project { --case-accent: #ff7959; --case-rgb: 255,121,89; --case-chrome: #180f0df5; }
#project-dialog.seo-project { --case-accent: #c9ff43; --case-rgb: 201,255,67; --case-chrome: #0d170ff5; }
#project-dialog > .dialog-header { background: var(--case-chrome); color: var(--editorial-text); border-color: rgba(var(--case-rgb), .18); backdrop-filter: blur(18px); }
#project-dialog .project-nav-brand small, #project-dialog .project-nav-type { color: var(--editorial-quiet); }
#project-dialog .project-nav-index { color: var(--case-accent); }
#project-dialog .project-nav-brand small::before, #project-dialog .close-icon { background: var(--case-accent); }
#project-dialog .close-dialog { background: rgba(var(--case-rgb), .045); border-color: rgba(var(--case-rgb), .3); box-shadow: none; }
#project-dialog .close-dialog::before { border-color: rgba(var(--case-rgb), .2); }
#project-dialog .close-dialog:hover { background: rgba(var(--case-rgb), .1); }
#project-dialog .close-dialog:hover .close-icon, #project-dialog .close-dialog:focus-visible .close-icon { background: var(--case-accent); }
#project-dialog .close-dialog:focus-visible { outline-color: var(--case-accent); }
#project-dialog > .project-pagination { background: var(--case-chrome); border-color: rgba(var(--case-rgb), .18); }
#project-dialog .project-pagination button:hover { background: var(--case-accent); border-color: var(--case-accent); color: #080808; }
.pc-caption p, .pc-caption > span:last-child { color: var(--editorial-muted); }

/* Contact popup and fields use the same quiet surfaces as the page. */
#contact-dialog.cx-contact-dialog { background: var(--editorial-surface); color: var(--editorial-text); border-color: #f2f0eb30; }
#contact-dialog::backdrop { background: #000b; }
.cx-contact-art { background: radial-gradient(ellipse at 0 95%, #56332366, transparent 65%), radial-gradient(ellipse at 95% 10%, #30395944, transparent 60%), #090909; border-color: var(--editorial-line); }
.cx-contact-orbit { border-color: #f2f0eb14; }
.cx-contact-orbit::after { border-color: #f2f0eb09; }
.cx-contact-orbit i { background: var(--editorial-accent); box-shadow: 0 0 15px #ff744d25; }
.cx-contact-top { background: var(--editorial-surface); }
.cx-contact-kicker, .cx-contact-top > span, .cx-contact-signoff p, .cx-contact-bottom, .cx-form-intro span { color: var(--editorial-muted); }
.cx-contact-art > p, .cx-fields > label, .cx-contact-close { color: #c0bdb7; }
.cx-fields input, .cx-fields textarea, .cx-fields select { background: #0b0b0b; border-color: #f2f0eb40; color: var(--editorial-text); }
.cx-fields input::placeholder, .cx-fields textarea::placeholder { color: var(--editorial-quiet); }
.cx-fields input:focus, .cx-fields textarea:focus, .cx-fields select:focus { background: #ff744d04; border-color: var(--editorial-accent); }
.cx-select-wrap option { background: var(--editorial-surface); color: var(--editorial-text); }
.cx-form-privacy, .cx-contact-bottom > span:last-child { color: var(--editorial-quiet); }
.cx-form-success p { color: var(--editorial-muted); }
.cx-success-mark { border-color: #f2f0eb40; }
.cx-form-success button { border-color: #f2f0eb40; }

/* Full archive shares the same palette and treatment. */
.fp-header, .fp-footer { background: var(--editorial-bg); border-color: var(--editorial-line); }
.fp-hero { background: var(--editorial-bg); }
.fp-eyebrow, .fp-strip-track figcaption, .fp-footer { color: var(--editorial-muted); }
.fp-hero-bottom p, .fp-meta p, .fp-strip-head > p:last-child, .fp-contact > div { color: var(--editorial-muted); }
.fp-orbit { border-color: #f2f0eb16; }
.fp-orbit span { color: var(--editorial-muted); }
.fp-item { --tile-rgb: 255,152,110; }
.fp-item-tall { --tile-rgb: 120,223,255; }
.fp-item-cinema { --tile-rgb: 255,121,89; }
.fp-item-posters { --tile-rgb: 181,160,255; }
.fp-item-seo { --tile-rgb: 201,255,67; }
.fp-meta { background: radial-gradient(ellipse at 0 100%, rgba(var(--tile-rgb), .14), transparent 80%), #0d0e11; }
.fp-meta b { color: rgb(var(--tile-rgb)); border-color: rgba(var(--tile-rgb), .25); }
.fp-meta > span { color: var(--editorial-quiet); }
.fp-image, .fp-item-seo .fp-image img { background: var(--editorial-bg); }
.fp-poster-stack { background: radial-gradient(circle, #30243c, #0f0d14 70%); }
.fp-filters button { color: var(--editorial-muted); border-color: #f2f0eb35; }
.fp-filters button:hover, .fp-filters button.active { background: var(--editorial-accent); color: var(--editorial-bg); border-color: var(--editorial-accent); }
.fp-hero h1 em, .fp-archive h2 em, .fp-contact em { color: var(--editorial-accent); }

/* Keep the existing cursor behavior, with a neutral ring matching the new palette. */
.cx-site-pointer { border-color: #f2f0eb80; color: var(--editorial-text); }
.cx-site-pointer.is-link { border-color: var(--editorial-accent); }

/* Studio light: wide, feathered pools with slow exposure changes and pointer drift.
   The light sits behind content; no extra cursor, particles, or foreground effects. */
.cx-ambient {
  --amb-warm: 120,58,35;
  --amb-cool: 36,48,96;
  --amb-x: 0;
  --amb-y: 0;
  position: relative;
  isolation: isolate;
}
.cx-ambient::before, .cx-ambient::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.cx-ambient::before {
  background: radial-gradient(ellipse 65% 75% at 15% 78%, rgba(var(--amb-warm), .28), transparent 75%), radial-gradient(ellipse 68% 90% at 83% 44%, rgba(var(--amb-cool), .38), transparent 78%);
  mask-image: linear-gradient(transparent, #000 14%, #000 78%, transparent);
  transform: translate3d(calc(var(--amb-x) * 22px), calc(var(--amb-y) * 14px), 0);
  transition: transform 1.3s cubic-bezier(.18,.7,.25,1);
  animation: cx-exposure 17s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.cx-ambient::after {
  opacity: .023;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.94' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
  mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent);
}
.cx-ambient.is-in-view::before { animation-play-state: running; }
#work.cx-ambient::before { display: block; }
.cx-service-band.cx-ambient { --amb-warm: 85,41,28; --amb-cool: 26,33,57; }
#work.cx-ambient { --amb-warm: 115,52,30; --amb-cool: 42,47,105; }
#approach.cx-ambient { --amb-warm: 111,61,35; --amb-cool: 31,44,68; }
.expertise.cx-ambient { --amb-warm: 60,47,49; --amb-cool: 38,48,108; }
#about.cx-ambient { --amb-warm: 127,61,35; --amb-cool: 35,43,65; }
#experience.cx-ambient { --amb-warm: 72,47,36; --amb-cool: 38,45,78; }
.contact-section.cx-ambient::before, .fp-contact.cx-ambient::before {
  background: radial-gradient(ellipse 74% 100% at 57% 110%, #343d996e, transparent 78%), radial-gradient(ellipse 45% 65% at 4% 82%, #9e472936, transparent 78%);
  mask-image: linear-gradient(transparent, #000 18%);
}
.fp-hero.cx-ambient { --amb-warm: 140,64,37; --amb-cool: 51,49,114; }
.fp-archive.cx-ambient { --amb-warm: 70,45,39; --amb-cool: 32,44,76; }
.cx-service-rail a:hover, .cx-service-rail a:focus-visible { background: linear-gradient(130deg, #ff744d0b, #8d9ade07); }
@keyframes cx-exposure { from { opacity: .65; } to { opacity: 1; } }
@media (hover: none), (pointer: coarse) {
  .cx-ambient::before { transform: none; animation: none; opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-ambient::before { animation: none; transition: none; transform: none; opacity: .85; }
}

/* Let the atmosphere fill the canvas while the editorial content keeps its measure. */
main > .section.wrap.cx-ambient::before,
main > .section.wrap.cx-ambient::after,
.fp-archive.cx-ambient::before,
.fp-archive.cx-ambient::after,
.fp-contact.cx-ambient::before,
.fp-contact.cx-ambient::after {
  left: calc(50% - 50vw);
  right: auto;
  width: 100vw;
}
.contact-section.wrap.cx-ambient {
  max-width: none;
  width: 100%;
  padding-inline: max(6vw, calc((100vw - 1600px) / 2 + 6vw));
}
.contact-section.wrap.cx-ambient::before,
.contact-section.wrap.cx-ambient::after { left: 0; right: 0; width: 100%; }
.footer.wrap {
  max-width: none;
  width: 100%;
  margin: 0;
  padding-inline: max(6vw, calc((100vw - 1600px) / 2 + 6vw));
  background: radial-gradient(ellipse 55% 130% at 53% 0%, #22284b3d, transparent 82%), #0c0c0e;
}
.fp-footer {
  background: radial-gradient(ellipse 55% 130% at 53% 0%, #22284b3d, transparent 82%), #0c0c0e;
}

/* One wordmark and one home destination throughout the site. */
.cx-header .wordmark { font-weight: 700; letter-spacing: -1.5px; }
.cx-header .wordmark .brand-period,
.footer .wordmark .brand-period,
.fp-mark .brand-period,
.cx-contact-brand .brand-period,
#project-dialog .project-nav-brand .brand-period {
  display: inline;
  font-size: 1em;
  line-height: inherit;
  margin: 0;
  vertical-align: baseline;
  letter-spacing: 0;
  color: var(--editorial-accent);
}
#project-dialog .project-nav-brand { display: inline-flex; align-items: center; gap: 10px; }
#project-dialog .project-nav-brand b { font-family: Manrope, sans-serif; font-size: 17px; letter-spacing: -.06em; text-transform: none; }

/* Photographic continuation: deep black, silver sidelight and quiet falloff.
   Scope the treatment to the homepage so case-study art keeps its own palette. */
body:has(.cx-photo-hero) { background: #050506; }
body:has(.cx-photo-hero) main { background: #050506; }
.cx-photo-hero::after { height: 140px; background: linear-gradient(transparent, #050506); }
body:has(.cx-photo-hero) :is(.cx-service-band, #work, #approach, #what-i-bring, #about, #experience, .contact-section) {
  background: transparent;
}
body:has(.cx-photo-hero) .cx-ambient::before {
  background:
    radial-gradient(ellipse 48% 68% at 88% 42%, #aebccd24, transparent 74%),
    radial-gradient(ellipse 42% 55% at 8% 75%, #976b4e19, transparent 75%),
    linear-gradient(118deg, transparent 36%, #c2c8ce0b 48%, #0007 48.2%, transparent 68%);
  mask-image: linear-gradient(transparent, #000 24%, #000 70%, transparent);
  animation: none;
  opacity: 1;
  transform: translate3d(calc(var(--amb-x) * 6px), calc(var(--amb-y) * 4px), 0);
}
body:has(.cx-photo-hero) .cx-ambient::after { opacity: .025; mix-blend-mode: soft-light; }
body:has(.cx-photo-hero) #work.cx-ambient::before {
  background: radial-gradient(ellipse 65% 55% at 50% 45%, #9caebe28, transparent 76%), radial-gradient(ellipse 45% 40% at 80% 80%, #ad63411c, transparent 74%);
}
body:has(.cx-photo-hero) #about.cx-ambient::before {
  background: radial-gradient(ellipse 55% 75% at 8% 50%, #b99a7430, transparent 75%), linear-gradient(115deg, transparent 40%, #a8b8c013 54%, transparent 73%);
}
body:has(.cx-photo-hero) .contact-section.cx-ambient::before {
  background: radial-gradient(ellipse 65% 95% at 70% 100%, #bb654333, transparent 75%), radial-gradient(ellipse 60% 85% at 25% 70%, #9baaba23, transparent 75%);
}
body:has(.cx-photo-hero) #what-i-bring.cx-ambient::before {
  background: linear-gradient(125deg, transparent 35%, #c4d0db10 48%, #0008 48.2%, transparent 67%), radial-gradient(ellipse 60% 90% at 85% 55%, #768d9f38, transparent 72%), radial-gradient(ellipse 45% 60% at 10% 85%, #a565421b, transparent 75%);
}
body:has(.cx-photo-hero) #experience.cx-ambient::before {
  background: linear-gradient(110deg, transparent 18%, #b7c6d113 40%, transparent 63%), radial-gradient(ellipse 45% 70% at 90% 55%, #98785520, transparent 75%);
}
body:has(.cx-photo-hero) .cx-service-rail { background: #080809; }
body:has(.cx-photo-hero) .cx-service-rail a:hover,
body:has(.cx-photo-hero) .cx-service-rail a:focus-visible { background: #f2f0eb06; }
body:has(.cx-photo-hero) .footer.wrap { background: #050506; }
body:has(.cx-photo-hero) main > .section { border-color: #f2f0eb20; }
@media (prefers-reduced-motion: reduce), (hover: none) {
  body:has(.cx-photo-hero) .cx-ambient::before { transform: none; transition: none; }
}