/* The same inks and materials run from the masthead to the project brief. */
:root {
  --bg: #f7f3eb;
  --fg: #27231f;
  --muted: #655b51;
  --line: #cfc4b5;
  --panel: #eee6d9;
  --raised: #fffcf6;
  --accent: #894226;
  --ink: #fff9ef;
  --inverse: #f7f3eb;
  --soft: #894226;
  --chrome: #faf7f0;
  --field-edge: #9b8c7a;
  --error: #a12636;
  --plate: #e9e0d2;
  --plate-sheen: linear-gradient(116deg, #f7f0e3, #e9dfd0 63%, #ddccba);
  --foil: linear-gradient(90deg, #914e31, #c68d5c 44%, #ded3bb 77%, #a8a299);
  --studio-art-filter: sepia(.28) saturate(.85);
  --menu-shadow: 0 16px 35px -13px #54371e50;
  --swatch-porcelain: linear-gradient(135deg, #fffdf5 12%, #e5dac7 48%, #b79c7f 76%, #f3e5cc);
  --swatch-obsidian: linear-gradient(135deg, #a3b4c9, #495665 41%, #171d29 61%, #3e4f69);
  --swatch-spectrum: linear-gradient(135deg, #7ce4f3 12%, #c2a9ff 47%, #f5a2df 72%, #7451a6);
  --mat: var(--swatch-porcelain);
  color-scheme: light;
}
html[data-theme="obsidian"] {
  --bg: #10141b;
  --fg: #f0f3f8;
  --muted: #aeb9ca;
  --line: #394352;
  --panel: #1b222c;
  --raised: #232b37;
  --accent: #acccff;
  --ink: #10213a;
  --inverse: #10141b;
  --soft: #b3d9ff;
  --chrome: #10151d;
  --field-edge: #68778c;
  --error: #ff9eac;
  --plate: #171e28;
  --plate-sheen: linear-gradient(116deg, #242d3a, #171e28 61%, #101721);
  --foil: linear-gradient(90deg, #62778f, #c1daef 42%, #627992 72%, #303c4c);
  --studio-art-filter: saturate(.47) contrast(1.04);
  --menu-shadow: 0 16px 35px -13px #03060cd6;
  --mat: var(--swatch-obsidian);
  color-scheme: dark;
}
html[data-theme="spectrum"] {
  --bg: #181323;
  --fg: #f5edff;
  --muted: #c3b4d5;
  --line: #493b5d;
  --panel: #2b203a;
  --raised: #30243f;
  --accent: #dcb4ff;
  --ink: #271634;
  --inverse: #181323;
  --soft: #94e5ed;
  --chrome: #20182e;
  --field-edge: #867397;
  --error: #ffaac6;
  --plate: #302342;
  --plate-sheen: linear-gradient(115deg, #30213e, #32264b 56%, #1c3443);
  --foil: linear-gradient(100deg, #88e8e8 0%, #b8baff 37%, #daaff5 62%, #f4bbd7 83%, #eccaa6);
  --studio-art-filter: hue-rotate(23deg) saturate(1.22);
  --menu-shadow: 0 16px 35px -13px #090416bd;
  --mat: var(--swatch-spectrum);
  color-scheme: dark;
}

.mast { background: var(--chrome); color: var(--fg); border-color: var(--line); }
.mast .desktop-nav a, .mast .theme-tool summary { color: var(--muted); }
.mast .desktop-nav a:hover, .mast .desktop-nav a[aria-current],
.mast .theme-tool[open] summary, .mast .theme-tool summary:hover { color: var(--accent); }
.mast .login { color: var(--fg); border-color: var(--field-edge); }
.mast .login:hover { background: var(--panel); border-color: var(--accent); }
.mast .brand:focus-visible, .mast .desktop-nav a:focus-visible, .mast summary:focus-visible,
.mast .mobile-toggle:focus-visible, .mast .login:focus-visible { outline-color: var(--soft); }
:root:not([data-theme="obsidian"]):not([data-theme="spectrum"]) .brand > .arkvell-wordmark {
  content: url("/brand/studio-signature.svg");
}
.mast .theme-panel, .mast .mobile-nav { background: var(--raised); box-shadow: var(--menu-shadow); }
.mast .theme-panel { width: min(224px, calc(100vw - 24px)); padding: 6px; }
.theme-panel button { min-height: 52px; column-gap: 12px; padding-inline: 11px; }
.theme-panel .sample { width: 22px; height: 22px; }
.theme-option-copy { display: grid; gap: 2px; }
.theme-option-copy strong { line-height: 1.25; }
.theme-panel .theme-option-copy small { color: var(--muted); margin: 0; font-size: 12px; line-height: 1.3; }
.theme-panel button[aria-pressed="true"] { background: var(--panel); color: var(--accent); }
.theme-panel button:focus-visible { outline-offset: -2px; }
.sw-porcelain { background: var(--swatch-porcelain); }
.sw-obsidian { background: var(--swatch-obsidian); }
.sw-spectrum { background: var(--swatch-spectrum); }

.site-footer { background: var(--chrome); color: var(--fg); border-color: var(--line); }
.site-footer small, .site-footer nav p { color: var(--muted); }
.site-footer nav a { color: var(--fg); }
.site-footer nav a:hover { color: var(--accent); }
.site-footer :focus-visible { outline-color: var(--soft); }
.site-footer::before {
  content: "";
  display: block;
  height: 2px;
  background: var(--foil);
}

.case-notes-link, .case-follow svg, .directory-arrow, .step-index,
.home-head .text-link, .home-faq .text-link, .home-prices .text-link,
.price-examples a > svg, .service-caption > svg, .service-compact > svg { color: var(--accent); }
.portfolio-sectors a[aria-current] {
  color: var(--ink);
  background: var(--accent);
  border-color: var(--accent);
}
html[data-theme="spectrum"] :is(.portfolio-sectors a[aria-current], .editor-form .button.primary,
  .concept-case .button.primary, .editor-page .editor-actions .button.primary) {
  background: var(--foil);
  color: var(--ink);
  border-color: transparent;
}
html[data-theme="spectrum"] :is(.index-lead, .case-intro, .pricing-lead, .reader-head) h1,
html[data-theme="spectrum"] :is(.home-faq, .home-prices) header h2,
html[data-theme="spectrum"] .home-head > h2 {
  width: fit-content;
  max-width: 100%;
  color: var(--fg);
  background: var(--foil);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.faq details[open], .price-list details[open] { border-top-color: var(--accent); }
.faq details[open] summary, .price-list details[open] summary { color: var(--accent); }

/* These components have their own fixed photo-stage palettes in the base sheets. */
.estimate, .editor-page .service-hero, html .editor-approach .approach-iris {
  --fg: inherit;
  --muted: inherit;
  --accent: inherit;
  --line: inherit;
  --ink: inherit;
  --raised: inherit;
}
.estimate, .editor-page .service-hero, html .editor-approach .approach-iris,
.principle-stage, .brief-cover, .contact-client, .contact-start {
  background: var(--plate-sheen);
  color: var(--fg);
}
.estimate {
  color-scheme: inherit;
  border-color: var(--line);
  border-top: 2px solid var(--accent);
}
.estimate-inputs label { color: var(--fg); }
.estimate-inputs select { border-color: var(--field-edge); }
.estimate .button.primary, .contact-start .button, .campaign-close .button.primary {
  background: var(--accent);
  color: var(--ink);
  border-color: transparent;
}
.estimate :focus-visible, .campaign-close .button.primary:focus-visible { outline-color: var(--soft); }
.editor-form :is(input,textarea,select):user-invalid { border-color: var(--error); }
.editor-form .upload:focus-within { outline: 2px solid var(--soft); outline-offset: 3px; }
.pricing-project-art { aspect-ratio: 1.6; }

.editor-approach .approach-iris .editor-link { color: var(--fg); border-color: var(--field-edge); }
.editor-approach .approach-iris .editor-link:hover { border-color: var(--accent); }
.editor-approach .approach-iris .approach-object { background: transparent; }
.brief-cover .editor-lead, .principle-notes p, .principle-identity > p { color: var(--muted); }
.editor-page .principle-identity h2 { color: var(--fg); }
.editor-page .principle-notes h3 { color: color-mix(in srgb, var(--accent) 88%, var(--tint)); }
.service-hero .direction-art, .approach-iris .approach-object,
.principle-art, .kinetics-poster, .campaign-close .close-photo { filter: var(--studio-art-filter); }
.material-study {
  position: absolute;
  inset: 0;
}
.material-study .material-frame {
  mask-image: radial-gradient(ellipse 62% 76% at 53% 55%, #000 48%, #000 63%, transparent 96%),
              linear-gradient(180deg, transparent, #000 12%, #000 84%, transparent);
  mask-composite: intersect;
}
.brief-cover:has(.material-study), .contact-start:has(.material-study) { color: var(--material-type); }
.brief-cover:has(.material-study) {
  background: linear-gradient(180deg, var(--material-paper) 22%, transparent 67%), var(--material-wall);
}
.brief-cover:has(.material-study) .editor-lead { color: var(--material-caption); }
.contact-start:has(.material-study) {
  background: linear-gradient(90deg, var(--material-paper) 20%, transparent 77%), var(--material-wall);
}
.contact-start:has(.material-study) .button {
  background: var(--material-type);
  color: var(--material-paper);
  border-color: transparent;
}
@media (max-width: 750px) {
  .brief-cover:has(.material-study) {
    display: grid;
    grid-template-rows: auto auto;
    min-height: 0;
    padding: 0;
  }
  .brief-cover:has(.material-study) > div:first-child { width: 100%; padding: 24px 24px 4px; }
  .brief-cover .brief-glass:has(.material-study) {
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(118px, 37vw, 210px);
    mask-image: none;
  }
}
@media (max-width: 540px) {
  .contact-start:has(.material-study) {
    grid-template-rows: auto auto;
    padding: 24px 0 0;
    background: linear-gradient(180deg, var(--material-paper) 28%, transparent 80%), var(--material-wall);
  }
  .contact-start:has(.material-study) header { grid-row: 1; max-width: 100%; padding-inline: 24px; }
  .contact-start > div:has(.material-study) {
    position: relative;
    inset: auto;
    grid-row: 2;
    width: 100%;
    height: clamp(116px, 36vw, 160px);
    z-index: auto;
    mask-image: none;
  }
}
html[data-theme="porcelain"] .service-hero .direction-art img,
html[data-theme="porcelain"] .approach-iris .approach-object,
html[data-theme="porcelain"] .principle-stage .principle-art { mask-image: none; }
html[data-theme="porcelain"] :is(.service-hero .direction-copy, .approach-iris .approach-intro) {
  padding-inline-end: clamp(20px, 2.4vw, 60px);
}

.kinetics, html[data-theme] .kinetics {
  --kin-ink: var(--plate);
  --kin-type: var(--fg);
  --kin-muted: var(--muted);
  background: var(--plate-sheen);
  border-block: 1px solid var(--line);
}
.kinetics-more, .kinetics-stops a { color: var(--muted); }
.kinetics-stops a { border-color: var(--line); }
.kinetics-stops a:hover, .kinetics-stops a.is-current { color: var(--fg); border-color: var(--accent); }
html[data-theme] .kinetics-stops a.is-current::before, .principle-selector a::after { background: var(--foil); }
.kinetics :is(button,a):focus-visible, .kinetics-panel:focus-visible { outline-color: var(--soft); }
.kinetics-art::before {
  inset: 66% 10% 8%;
  background: radial-gradient(ellipse closest-side, color-mix(in srgb, var(--muted) 22%, transparent), transparent);
}

.campaign-close { color: var(--fg); background: var(--plate); }
.campaign-close h2 { color: inherit; }
.campaign-close::before {
  background: linear-gradient(90deg, var(--plate) 7%, color-mix(in srgb, var(--plate) 95%, transparent) 28%, transparent 67%);
}
.campaign-close .button.primary:hover { background: var(--accent); filter: brightness(1.08); }
@media (max-width: 860px) {
  html[data-theme="porcelain"] .approach-iris .approach-intro { padding-bottom: 22px; }
}
@media (max-width: 850px) {
  html[data-theme="porcelain"] .service-hero .direction-copy { padding-bottom: 16px; }
}
@media (max-width: 750px) {
  .contact-start > div { width: 54%; mask-image: linear-gradient(90deg, transparent, #0003 32%, #000 72%); }
  .brief-cover .brief-glass { width: 40%; mask-image: linear-gradient(90deg, transparent, #0003 28%, #000 75%); }
}
@media (max-width: 670px) {
  .campaign-close::before {
    background: linear-gradient(0deg, var(--plate) 4%, color-mix(in srgb, var(--plate) 96%, transparent) 27%, transparent 66%);
  }
}
@media (max-width: 480px) {
  .mast .theme-panel { right: -32px; }
}
@media (forced-colors: active) {
  html[data-theme="spectrum"] :is(h1,h2) { -webkit-text-fill-color: CanvasText !important; }
  .portfolio-sectors a[aria-current] { outline: 1px solid Highlight; }
}