/* ENENINTA · approved Bathyal palette with Signal Coral.
   This file owns pigment, surface, text and control-colour roles.
   Tonal mixes in the component sheets derive from these pigments. */
:root {
  --project-ground-shadow: 0 14px 18px -12px color-mix(in srgb,var(--storm) 32%,transparent), 0 5px 8px -6px color-mix(in srgb,var(--storm) 22%,transparent);
  --card-hover-ring: color-mix(in srgb,var(--coral) 60%,transparent);
  --ink: #101a22;
  --contact-surface: #111720;
  --frost: #f3f5f4;
  --storm: #294957;
  --mist: #a8c8c2;
  --coral: #ff6248;
  --apricot: #f29176;
  --lacquer: #a94331;
  --white: #ffffff;
  --black: #000000;
  --ink-2: color-mix(in srgb,var(--ink) 65%,var(--storm));
  --reading: color-mix(in srgb,var(--storm) 95%,var(--ink));
  --rule: color-mix(in srgb,var(--mist) 65%,var(--frost));
  --line: color-mix(in srgb,var(--ink) 19%,transparent);
  --surface-soft: color-mix(in srgb,var(--mist) 18%,var(--frost));
  --surface-card: color-mix(in srgb,var(--mist) 12%,var(--frost));
  --text-on-dark: var(--frost);
  --text-muted-dark: color-mix(in srgb,var(--mist) 50%,var(--frost));
  --editorial-fade: linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 42%,var(--storm) 62%,color-mix(in srgb,var(--mist) 80%,var(--frost)) 84%,var(--frost) 97%);
  --accent-text: var(--lacquer);
  --heading-accent: var(--accent-text);
  --on-primary: var(--white);
  --focus: var(--storm);
  --plastic-volt: var(--coral);
  --plastic-bright: var(--apricot);
  --plastic-deep: var(--lacquer);

  /* The cap is Signal Coral itself; depth comes from edge reflections and shadows. */
  --primary-surface:
    linear-gradient(180deg,color-mix(in srgb,var(--white) 22%,transparent),transparent 35%) padding-box,
    linear-gradient(145deg,var(--coral),var(--coral) 84%,color-mix(in srgb,var(--coral) 92%,var(--apricot))) padding-box,
    linear-gradient(135deg,var(--apricot),var(--coral) 50%,var(--apricot)) border-box;
  --primary-pressed:
    linear-gradient(180deg,color-mix(in srgb,var(--ink) 12%,transparent),transparent 75%) padding-box,
    linear-gradient(180deg,var(--coral),var(--coral) 80%,var(--apricot)) padding-box,
    linear-gradient(150deg,var(--coral),var(--apricot)) border-box;
  --secondary-surface:
    linear-gradient(180deg,color-mix(in srgb,var(--frost) 7%,transparent),transparent 60%) padding-box,
    linear-gradient(145deg,color-mix(in srgb,var(--storm) 12%,transparent),color-mix(in srgb,var(--ink) 7%,transparent)) padding-box;
  --secondary-pressed:
    linear-gradient(180deg,color-mix(in srgb,var(--ink) 20%,transparent),color-mix(in srgb,var(--mist) 8%,transparent)) padding-box;
}
/* Maintain the existing dark-to-light section boundaries and gradient stops. */
.studio-home :is(.hero,.services,.about,.contact),
.cinematic-footer,.studio-foot,.gallery-section,.related,.service-menu,.lightbox {
  --accent-text: var(--coral);
  --heading-accent: var(--coral);
  --focus: var(--mist);
}
body :is(button,a,summary,input,textarea,select):focus-visible {
  outline-color: var(--focus);
}
body :is(h1,h2,h3,.section-title,.display) em {
  color: var(--heading-accent);
}
.studio-home .hero__title em,
.studio-home .contact__title em {
  color: var(--coral);
}
.studio-home .contact__title em {
  text-shadow: 1.5px 0 color-mix(in srgb,var(--coral) 35%,transparent),
    -1px 0 var(--lacquer);
}
body :is(.process-panel h3) { color: var(--accent-text); }
body :is(.shiny-button,.liquid-cta,.nav-contact,.back-btn,.pill):not(.shiny-button--outline) {
  color: var(--on-primary)!important;
  background: var(--primary-surface);
  text-shadow: 0 1px 2px color-mix(in srgb,var(--ink) 50%,transparent);
}
body :is(.shiny-button,.liquid-cta,.nav-contact,.back-btn,.pill):not(.shiny-button--outline):is(:active,.is-fully-pressed) {
  background: var(--primary-pressed)!important;
}
body .shiny-button--outline { color: var(--frost); background: var(--secondary-surface); }
body .shiny-button--outline:is(:active,.is-fully-pressed) { background: var(--secondary-pressed)!important; }
.studio-home .section.work,.process-scroll { background: var(--frost); }
.studio-home .work-player .work-card,
.studio-home .work-player .work-card__art { background: var(--white); }
.studio-home .work-player .work-card { border: 0; }
.studio-home .work-player .work-card .work-card__bottom { border: 0; box-shadow: none; }
.work-card__category { color: var(--text-muted-dark); }
.studio-inner .cta { background: var(--coral); color: var(--ink); }
.studio-inner .next-cta { background: var(--surface-soft); color: var(--ink); }
.studio-foot { color: var(--frost); }
.studio-foot p { color: var(--text-muted-dark); }
/* The existing wordmark typography remains in studio.css. */
/* Reading text on the service-page pale surfaces uses a single contrast role. */
.studio-inner .section-head p,
.studio-inner .hero p,
.studio-inner .intro p,
.studio-inner .deliverable p { color: var(--reading); }
.studio-inner .related .section-head p,
.studio-inner .gallery-section .gallery-heading p { color: var(--text-muted-dark); }
/* Service introductions stay dark; related work now uses the homepage's light surface. */
.service-page .service-intro p { color: var(--text-muted-dark); }
.service-page .related .section-head p { color: var(--reading); }
/* Keep the cap reflection above the white label, matching the original primary glint. */
body :is(.shiny-button,.liquid-cta,.nav-contact,.back-btn,.pill):not(.shiny-button--outline):not(:active):not(.is-fully-pressed)::after {
  background: radial-gradient(ellipse 50% 70% at var(--glint-x) 10%,
    color-mix(in srgb,var(--white) 9%,transparent),transparent);
}

/* Review 30: one coral material for primary actions, selected steps and service controls. */
body .shiny-button--outline {
  color: var(--reading); border: 1px solid color-mix(in srgb,var(--storm) 35%,transparent);
  box-shadow: inset 0 1px 1px color-mix(in srgb,var(--white) 15%,transparent);
  text-shadow: none;
}
body .shiny-button--outline::before { opacity: .18; }
body .shiny-button--outline::after { opacity: .2; border-color: transparent; }
body .hero .shiny-button--outline {
  color: var(--frost); border-color: color-mix(in srgb,var(--frost) 30%,transparent);
}
body .shiny-button--outline:is(:hover,:focus-visible) {
  box-shadow: inset 0 2px 4px color-mix(in srgb,var(--ink) 12%,transparent),inset 0 -1px 1px color-mix(in srgb,var(--frost) 25%,transparent)!important;
}
body.studio-home .process-panel h3 { color: var(--coral); }
body .process-tabs button[aria-current] {
  color: var(--white); background: var(--primary-surface); border: 1px solid var(--apricot);
  box-shadow: inset 0 1px 3px color-mix(in srgb,var(--white) 60%,transparent),inset 0 -2px 3px color-mix(in srgb,var(--ink) 14%,transparent),0 0 0 3px color-mix(in srgb,var(--coral) 16%,transparent);
  text-shadow: 0 1px 2px var(--lacquer);
}
body .process-tabs button[aria-current]:is(:hover,:focus-visible) {
  box-shadow: inset 0 3px 6px color-mix(in srgb,var(--ink) 16%,transparent),inset 0 -1px 2px color-mix(in srgb,var(--white) 55%,transparent),0 0 0 3px color-mix(in srgb,var(--coral) 22%,transparent);
}
body .process-tabs button[aria-current]:is(:active,.is-fully-pressed) { background: var(--primary-pressed); }
.studio-home .work-player .work-card:is(:hover,:focus-visible) {
  outline: 2px solid var(--card-hover-ring); outline-offset: 3px;
  box-shadow: 0 19px 17px -14px color-mix(in srgb,var(--ink) 38%,transparent),0 0 15px color-mix(in srgb,var(--coral) 10%,transparent);
}
.studio-home .work-player .work-card:is(:hover,:focus-visible) .work-card__bottom {
  background: var(--coral)!important; border-color: var(--coral);
}
.studio-home .work-player .work-card:is(:hover,:focus-visible) :is(.work-card__project,.work-card__category,.work-card__excerpt) { color: var(--ink); }
.studio-home .work .work-heading .work-player__all { align-self: center; justify-self: center; }
.film-nav { position: relative; isolation: isolate; }
.cinematic-footer .film-nav > a { position: relative; z-index: 1; border-radius: 999px; }
.cinematic-footer .film-nav > a:is(:hover,:focus-visible) { color: var(--frost); text-shadow: none; }
.studio-home .service-tile:is(:hover,:focus-visible) .circle-arrow {
  color: var(--white)!important; background: var(--primary-surface)!important;
  border: 1px solid var(--apricot)!important;
  box-shadow: inset 0 2px 3px color-mix(in srgb,var(--white) 45%,transparent),inset 0 -2px 4px color-mix(in srgb,var(--ink) 20%,transparent),0 0 12px color-mix(in srgb,var(--coral) 20%,transparent);
  transform: translateY(2px) scale(.987)!important;
}
.studio-home .service-tile:is(:active,.is-fully-pressed) .circle-arrow {
  background: var(--primary-pressed)!important; transform: translateY(4px) scale(.96)!important;
  box-shadow: inset 0 5px 8px color-mix(in srgb,var(--ink) 30%,transparent),inset 0 -2px 3px color-mix(in srgb,var(--white) 50%,transparent);
}
/* Reserve room for the outside focus/hover ring inside the scrolling viewport. */
.studio-home .work-player .work__track { padding-inline: 6px; scroll-padding-inline-start: 6px; }

/* Closing contact section: owner-approved Midnight Ink, distinct from the footer image. */
.studio-home .contact-stage { background: var(--contact-surface); }
.studio-home .contact { background: var(--contact-surface); }
.studio-home .contact::before {
  background: linear-gradient(180deg,transparent,var(--contact-surface));
}
/* Review 31: calm project cards and a Midnight Ink transport strip. */
.studio-home .work-player .work-card,
.studio-home .work-player .work-card:is(:hover,:focus-visible) {
  transform: none!important; box-shadow: none!important; filter: none!important;
}
.studio-home .work-player .work-card .work-card__art img,
.studio-home .work-player .work-card:is(:hover,:focus-visible) .work-card__art img {
  transform: none!important; filter: none!important;
}
.studio-home .work-player .work-card__bottom::after { content: none; }
.studio-home .work-player .work-player__transport { background: var(--contact-surface); box-shadow: none; }
.studio-home .work-player .work-player__transport::before,
.studio-home .work-player .work-player__transport::after { background: none; }
.studio-home .service-tile:is(:hover,:focus-visible) .service-tile__name,
.studio-home .drawing-panel:is(:hover,:focus-within,.surface-preview) .diptych__name { color: var(--coral); }
.studio-home .work-player .work-card__equalizer { display: none; }