:root {
  --detail-rule: color-mix(in srgb, var(--accent) 24%, transparent);
  --detail-wash: color-mix(in srgb, var(--accent) 5%, transparent);
  --detail-metal: #8b6149;
}
:root[data-theme="dark"] { --detail-metal: #d6aa8e; }

body.studio-shell {
  min-block-size: 100vh;
  display: flex;
  flex-direction: column;
}
.studio-shell > main { flex: 1 0 auto; }
.studio-shell > .masthead {
  background: linear-gradient(90deg, transparent, var(--detail-wash) 50%, transparent);
}
.studio-shell > .masthead::after {
  content: "";
  position: absolute;
  inset: auto 0 -3px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--detail-rule) 20% 80%, transparent);
  pointer-events: none;
}
.studio-shell > .site-footer {
  position: relative;
  background: linear-gradient(180deg, var(--detail-wash), transparent 76%), var(--paper);
}
.studio-shell > .site-footer::before {
  content: "";
  position: absolute;
  inset: -4px 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--detail-rule) 18% 82%, transparent);
  pointer-events: none;
}
.studio-shell .footer-inner { padding-block: .8rem; }

.studio-shell :is(.page-intro, .studio-photo-intro, .studio-profile, .case-heading, .concept-page) .kicker {
  display: flex;
  align-items: center;
  gap: .55rem;
}
.studio-shell :is(.page-intro, .studio-photo-intro, .studio-profile, .case-heading, .concept-page) .kicker::after {
  content: "";
  inline-size: clamp(1rem, 4.1vw, 3.8rem);
  block-size: 1px;
  background: linear-gradient(90deg, var(--detail-metal), transparent);
}
.studio-shell :is(.page-intro, .case-heading) .intro-aside,
.studio-shell .case-heading > div + div {
  border-inline-start: 1px solid var(--detail-rule);
  padding-inline-start: clamp(.7rem, 1.4vw, 1.15rem);
}
.studio-shell :is(.page-intro, .studio-photo-intro, .studio-profile, .case-heading) h1 {
  overflow-wrap: anywhere;
}

.studio-identity-art {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(ellipse at 43% 36%, var(--panel), transparent 78%), var(--selected);
}
.studio-identity-art::before,
.studio-identity-art::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.studio-identity-art::before {
  inset: 8%;
  border: 1px solid var(--detail-rule);
}
.studio-identity-art::after {
  inset: -42% -22% 1% 49%;
  border: 1px solid var(--detail-rule);
  border-radius: 52%;
  transform: rotate(-23deg);
  box-shadow: 0 0 0 13px var(--detail-wash), 0 0 0 14px var(--detail-rule);
}

.studio-shell :is(.callout, .inquiry-layout aside) { position: relative; isolation: isolate; overflow: clip; }
.studio-shell :is(.callout, .inquiry-layout aside)::after {
  content: "";
  position: absolute;
  inset: -73% -3rem -86% auto;
  width: min(42%, 22rem);
  border: 1px solid color-mix(in srgb, var(--callout-muted) 19%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 11px color-mix(in srgb, var(--callout-muted) 3%, transparent);
  transform: rotate(-26deg);
  pointer-events: none;
  z-index: -1;
}
.studio-shell .callout > .page-width { position: relative; }
.studio-shell :is(.studio-photo, .case-gallery figure, .feature-panel, .portfolio-card, .concept-card) {
  box-shadow: 0 8px 24px -20px color-mix(in srgb, var(--accent) 42%, transparent);
}
.studio-shell .case-gallery figcaption {
  color: var(--muted);
  background: var(--band);
  font-weight: 600;
}
.studio-shell .case-gallery figure:nth-child(2) img { max-inline-size: 100%; }
.studio-shell .portfolio-copy {
  display: flex;
  flex-direction: column;
  align-items: start;
}
.studio-shell .portfolio-copy > .text-link { margin-block-start: auto; }
.studio-shell .portfolio-copy h2 { text-wrap: pretty; }

.studio-shell .feature-copy > .action { max-width: 100%; }
.studio-shell .site-nav a:focus-visible, .studio-shell .site button:focus-visible, .studio-shell .site select:focus-visible {
  outline-color: var(--fg);
  outline-offset: 2px;
}
.studio-shell .concept-page .package-line strong { color: var(--accent); }
.studio-shell .concept-page .seif-tier-collection { color: var(--ink); --board-price: var(--accent); --board-muted: var(--muted); }
.studio-shell .concept-page .tier-cover { color: var(--fg); }
.studio-shell .concept-card-copy { display: flex; flex-direction: column; flex: 1; }
.studio-shell .concept-card { display: flex; flex-direction: column; }
.studio-shell .concept-card-price { margin-block-start: auto; padding-block-start: .26rem; }
.studio-shell .tier-entry { scroll-margin-block-start: 1rem; }
.studio-shell .mobile-nav nav { max-inline-size: calc(100vw - 2rem); }

@media (max-width: 570px) {
  .studio-shell :is(.page-intro, .case-heading) .intro-aside,
  .studio-shell .case-heading > div + div { padding-inline-start: .7rem; }
  .studio-shell .footer-inner .studio-logo { width: 62px; }
  .studio-shell .footer-inner > .text-link { align-self: start; }
}
@media (prefers-reduced-motion: no-preference) {
  .studio-shell :is(.action, .package-example, .concept-card) {
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
  }
}