/* Shared brushed lacquer for the Studio statement and closing invitations. */
:root {
  --metal-silver-surface:
    radial-gradient(ellipse at 5% 10%,#ffffff9c,transparent 56%),
    conic-gradient(from 215deg at 88% 16%,transparent,#ffffff45 32deg,#2949570d 60deg,transparent 88deg,#ffffff80 125deg,transparent 170deg,#a8c8c22b 225deg,transparent 300deg),
    repeating-linear-gradient(2deg,#ffffff30 0 1px,#101a2205 1px 2px,transparent 2px 4px),
    linear-gradient(130deg,color-mix(in srgb,var(--storm) 25%,var(--frost)),var(--frost) 24%,color-mix(in srgb,var(--storm) 24%,var(--frost)) 48%,color-mix(in srgb,var(--mist) 18%,var(--frost)) 75%,color-mix(in srgb,var(--storm) 22%,var(--frost)));
  --metal-panel-surface:
    linear-gradient(115deg,color-mix(in srgb,var(--mist) 9%,transparent),transparent 40%,color-mix(in srgb,var(--coral) 4%,transparent)),
    repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 3px),
    linear-gradient(155deg,color-mix(in srgb,var(--storm) 72%,var(--mist)),var(--ink) 38%,var(--storm) 68%,var(--contact-surface));
  --metal-panel-reflection:linear-gradient(115deg,transparent 25%,#ffffff0d 46%,transparent 65%);
}
body .metallic-panel {
  position:relative; isolation:isolate; overflow:hidden; border-radius:16px;
  background:var(--metal-panel-surface); color:var(--frost);
  box-shadow:inset 0 1px 1px #ffffff70,inset 0 -3px 5px #0005;
}
body .metallic-panel::after {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:var(--metal-panel-reflection);
}
body.portfolio-overview .portfolio-closing.metallic-panel {
  flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:36px; padding:clamp(56px,6vw,88px) clamp(24px,5vw,72px);
  margin:clamp(48px,5vw,72px) 0 clamp(64px,6vw,88px);
}
body.portfolio-overview .portfolio-closing.metallic-panel h2 {
  color:var(--frost); max-width:22ch; font-size:clamp(32px,3.7vw,56px);
  line-height:1.12; text-wrap:balance;
}
/* A quiet ink veil keeps the drawing connected to the dark preceding chapter. */
.studio-page .studio-art--immersive::before {
  background:linear-gradient(180deg,var(--ink),transparent 24%),
    linear-gradient(90deg,color-mix(in srgb,var(--ink) 93%,transparent),color-mix(in srgb,var(--ink) 78%,transparent) 30%,color-mix(in srgb,var(--ink) 32%,transparent) 56%,color-mix(in srgb,var(--ink) 26%,transparent));
}
/* Translucent keyboard-inspired service keys, subordinate to coral contact CTAs. */
body.studio-page .studio-service-links .shiny-metallic {
  --key-tint:var(--mist);
  --secondary-pressed:linear-gradient(180deg,color-mix(in srgb,var(--key-tint) 25%,transparent),color-mix(in srgb,var(--key-tint) 15%,transparent));
  color:var(--ink); border-color:color-mix(in srgb,var(--key-tint) 35%,transparent);
  background:linear-gradient(160deg,#ffffff80,color-mix(in srgb,var(--key-tint) 15%,transparent) 48%,color-mix(in srgb,var(--key-tint) 24%,transparent));
  box-shadow:inset 0 1px 2px #ffffffd9,inset 0 -2px 3px #101a220d,0 2px 5px #101a220a;
  min-height:48px;
}
.studio-page .studio-service-links .shiny-metallic:nth-child(2) { --key-tint:var(--storm); }
.studio-page .studio-service-links .shiny-metallic:nth-child(3) { --key-tint:var(--apricot); }
.studio-page .studio-service-links .shiny-metallic:nth-child(4) { --key-tint:var(--coral); }
body.studio-page .studio-service-links .shiny-metallic:is(:hover,:focus-visible) {
  color:var(--ink); background:linear-gradient(160deg,#ffffff99,color-mix(in srgb,var(--key-tint) 24%,transparent));
}
body.studio-page .studio-service-links .shiny-metallic:is(:active,.is-fully-pressed) { color:var(--ink)!important; }
/* Keep the measured sticky frame for the existing footer wipe; inset the metal card. */
body.studio-page .contact-stage { background:var(--contact-surface); }
body.studio-page .contact-stage #contact.contact {
  background:var(--frost); min-height:0;
  padding:clamp(48px,5vw,72px) var(--page-edge) clamp(64px,6vw,88px);
}
body.studio-page #contact.contact::before { display:none; }
body.studio-page #contact.contact > .container.metallic-panel {
  background:var(--metal-panel-surface); width:100%; max-width:1440px;
  padding:clamp(56px,6vw,88px) clamp(24px,5vw,72px);
}
body.studio-page #contact.contact .contact__bottom { margin-top:28px; gap:32px; }
/* Home: a content-sized invitation rather than a fullscreen contact chapter. */
body.studio-home .contact-stage #contact.contact {
  min-height:0; background:var(--surface-soft);
  padding:clamp(40px,4vw,64px) var(--page-edge) clamp(48px,4.5vw,72px);
}
body.studio-home #contact.contact::before { display:none; }
body.studio-home #contact.contact > .container.metallic-panel {
  max-width:1440px; width:100%; background:var(--metal-panel-surface);
  padding:clamp(44px,4vw,64px) clamp(24px,5vw,72px);
}
body.studio-home #contact.contact .contact__title {
  font-size:clamp(36px,4vw,64px); line-height:1.08; max-width:21ch;
}
body.studio-home #contact.contact .contact__bottom { margin-top:24px; gap:28px; }
body.studio-home #contact.contact .contact__bottom p { max-width:49ch; }
@media(prefers-reduced-motion:reduce),(max-height:650px) {
  body.studio-home .cinematic-footer { margin-top:0; }
}
@media(max-width:1100px) {
  .studio-art__image::after { background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 24%,transparent),color-mix(in srgb,var(--ink) 24%,transparent) 60%,var(--ink)); }
}
@media(max-width:600px) {
  body.portfolio-overview .portfolio-closing.metallic-panel { gap:28px; padding:48px 24px; margin-block:40px 56px; }
  body.studio-page #contact.contact > .container.metallic-panel { padding:48px 24px; }
  body.studio-page #contact.contact .contact__bottom { margin-top:24px; gap:28px; }
  body.studio-page .contact-stage #contact.contact { padding-block:40px 56px; }
  body.studio-home .contact-stage #contact.contact { padding-block:32px 40px; }
  body.studio-home #contact.contact > .container.metallic-panel { padding:40px 24px; }
  body.studio-home #contact.contact .contact__title { font-size:clamp(32px,8vw,40px); }
  body.studio-home #contact.contact .contact__bottom { margin-top:24px; gap:24px; }
}