/* Prompt Studios: calm white reading sections beside the dark interactive work. */
:root {
  --paper: #f5f7f7;
  --paper-raised: #ffffff;
  --paper-recessed: #e8eeed;
  --paper-ink: #18262e;
  --paper-muted: #52616b;
  --paper-line: #d2dcde;
  --paper-control: #7d8e96;
  --paper-accent: #275e4d;
}
:is(.surface-light, .surface-light-panel) {
  --bg: var(--paper);
  --panel: var(--paper-raised);
  --panel-hi: var(--paper-recessed);
  --ink: var(--paper-ink);
  --muted: var(--paper-muted);
  --line: var(--paper-line);
  --accent: var(--paper-accent);
  --blue: var(--paper-muted);
  color-scheme: light;
  color: var(--ink);
  background: var(--paper);
}
/* Paint full-width bands without changing the existing .wrap content widths. */
.surface-light { position: relative; isolation: isolate; }
.surface-light::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px 0;
  background: var(--paper);
  box-shadow: 0 0 0 100vmax var(--paper);
  clip-path: inset(0 -100vmax);
  pointer-events: none;
}
/* Existing demonstrations and true-colour screenshot frames remain dark islands. */
.surface-dark {
  --bg: #0b0c0e;
  --panel: #141619;
  --panel-hi: #1b1e22;
  --ink: #f3f4f5;
  --muted: #b0bac4;
  --line: #3b4651;
  --accent: #b7e3d2;
  --blue: #bdc2c8;
  color-scheme: dark;
  color: var(--ink);
}
html:root :is(.surface-light, .surface-light-panel) :where(h1,h2,h3,strong,legend,label):not(:where(.surface-dark *)) { color: var(--ink); }
html:root :is(.surface-light, .surface-light-panel) :where(p,li,dt,small):not(:where(.surface-dark *)) { color: var(--muted); }
html:root :is(.surface-light, .surface-light-panel) :where(h1,h2) > span { color: var(--muted); }
html:root :is(.surface-light, .surface-light-panel) .eyebrow { color: var(--accent); }
html:root :is(.surface-light, .surface-light-panel) .step-number { color: var(--muted); }
:is(.surface-light, .surface-light-panel) :focus-visible { outline-color: var(--accent); }
:is(.surface-light, .surface-light-panel) .text-link { color: var(--ink); }
:is(.surface-light, .surface-light-panel) .btn:not(:where(.surface-dark *)) {
  color: #ffffff;
  background: var(--paper-ink);
  border-color: var(--paper-ink);
  box-shadow: 0 2px 3px #18262e12;
}
:is(.surface-light, .surface-light-panel) .btn-secondary:not(:where(.surface-dark *)) {
  color: var(--ink);
  background: var(--paper-raised);
  border-color: var(--paper-control);
  box-shadow: none;
}
/* Homepage reading sequence: white explanations, dark diagrams. */
.page-home .surface-light { background: var(--paper); border-color: var(--line); }
.page-home .surface-light .centred-heading > p:last-child,
.page-home .surface-light .feature-copy > p:not(.eyebrow),
.page-home .surface-light .connected-notes p { color: var(--muted); }
.page-home .surface-light .connected-notes strong { color: var(--ink); }
.page-home .surface-light .feature-disclosures { border-color: var(--line); }
.page-home .surface-light .feature-disclosures details { border-color: var(--line); }
.page-home .surface-light .feature-disclosures summary { color: var(--ink); }
.page-home .surface-light .feature-disclosures summary > span,
.page-home .surface-light .feature-disclosures summary svg,
.page-home .surface-light .feature-disclosures p { color: var(--muted); }
/* Capability cards are raised white surfaces with clear, quiet controls. */
.surface-light .capability {
  background: var(--paper-raised);
  border-color: var(--line);
  box-shadow: 0 2px 3px #18262e04;
}
.surface-light .capability-icon {
  background: var(--paper-recessed);
  border-color: #bac9c8;
  color: var(--paper-accent);
  box-shadow: none;
}
html:root .surface-light .capability > p,
html:root .surface-light .capability-content { color: var(--muted); }
html:root .surface-light .capability-details { border-color: var(--line); }
html:root .surface-light .capability-details summary { color: var(--ink); }
.surface-light .capability-content li { color: var(--muted); }
/* Light project captions sit outside the original dark screenshot frames. */
html:root .surface-light .project-card-caption h3 { color: var(--ink); }
html:root .surface-light .project-card-caption p,
html:root .surface-light .project-kind { color: var(--muted); }
html:root .surface-light .prototype-row {
  background: var(--paper-raised);
  border-color: var(--line);
  color: var(--ink);
}
html:root .surface-light .prototype-row > span > span { color: var(--muted); }
html:root .surface-light .prototype-row-mark { background: var(--paper-recessed); border-color: #bac9c8; color: var(--ink); }
.surface-light .prototype-row .prototype-pill { color: var(--paper-accent); background: var(--paper-recessed); border-color: #bac9c8; }
.surface-light .project-card-image { --ink:#f3f4f5; --muted:#bdc2c8; --line:#3b4651; --accent:#b7e3d2; color:#f3f4f5; }
.surface-light .project-card-image :is(.prototype-pill,.chorus-name) { color:#f3f4f5; }
.surface-light .work-index-section { background: var(--paper); }
.work-index-section.surface-light, .services-overview.surface-light { padding-top: 72px; }
.page-studio .founder-section.surface-light { padding-top: 80px; }
/* Editorial pages share the same paper and heading tones. */
.surface-light .service-inclusions svg { color: var(--paper-accent); }
.surface-light .founder-copy .large-copy,
.surface-light .founder-facts dd { color: var(--ink); }
.surface-light .founder-facts dt { color: var(--muted); }
.surface-light .founder-facts > div { border-color: var(--line); }
.surface-light .founder-art { color: var(--ink); }
.surface-light .service-evidence { color: var(--ink); }
.case-credit.surface-light { margin-bottom:0; padding-block:32px; border-left:0; border-top:1px solid var(--line); }
.next-project.surface-light { border-color: var(--line); }
.next-project.surface-light svg { color: var(--paper-accent); }
/* FAQ rules use the light context, including open and keyboard-focus states. */
.surface-light .faq-list details { border-color: var(--line); }
.surface-light .faq-list summary { color: var(--ink); }
.surface-light .faq-list summary svg { color: var(--muted); }
.surface-light .faq-list details p { color: var(--muted); }
/* A white enquiry surface inside the dark contact page. */
.contact-form-panel.surface-light-panel {
  background: var(--paper-raised);
  border-color: var(--paper-line);
  box-shadow: 0 12px 40px #0002;
}
.surface-light-panel .preview-notice {
  color: var(--paper-muted);
  background: var(--paper);
  border-color: var(--paper-line);
}
.surface-light-panel :is(.form-progress,.step-intro,.field-help,.form-step-intro,.optional,.form-step-number) { color: var(--paper-muted); }
.surface-light-panel .form-step-nav button {
  color: var(--paper-muted);
  background: var(--paper);
  border-color: var(--paper-control);
}
.surface-light-panel .form-step-nav button > span { border-color: var(--paper-control); }
.surface-light-panel .form-step-nav button[aria-current="step"] {
  color: #ffffff;
  background: var(--paper-ink);
  border-color: var(--paper-ink);
}
.surface-light-panel .form-step-nav button[aria-current="step"] > span { border-color: #b5c6ce; }
.surface-light-panel .field :is(input:not([type="radio"]),textarea,select) {
  color: var(--paper-ink);
  background: var(--paper-raised);
  border-color: var(--paper-control);
}
.surface-light-panel .field :is(input,textarea)::placeholder { color: #626f77; opacity: 1; }
.surface-light-panel .field [aria-invalid="true"] { border-color: #a62c26; }
html:root .surface-light-panel .field-error { color: #a62c26; }
.surface-light-panel .chip-face { color:var(--paper-ink); background:var(--paper-raised); border-color:var(--paper-control); }
.surface-light-panel .choice-mark { border-color:var(--paper-control); }
.surface-light-panel .chip input:checked + .chip-face {
  color:var(--paper-ink); background:var(--paper-recessed); border-color:var(--paper-accent);
  box-shadow:inset 0 0 0 1px var(--paper-accent);
}
.surface-light-panel .chip input:checked + .chip-face .choice-mark {
  background:var(--paper-accent); border-color:var(--paper-accent); box-shadow:inset 0 0 0 3px var(--paper-recessed);
}
.surface-light-panel .form-step-actions { border-color:var(--paper-line); }
.surface-light-panel .form-step-actions .btn--secondary { color:var(--paper-ink); background:transparent; border-color:var(--paper-control); box-shadow:none; }
.surface-light-panel .form-step-indicators span { background:var(--paper-line); }
.surface-light-panel .form-step-indicators .is-current { background:var(--paper-accent); }
html:root .surface-light-panel .form-status { color:#225943; }
.surface-light-panel .form-status:not(:empty) { background:#e8f1ed; border-color:#7d9b8a; }
.contact-page { padding-bottom:0; }
.contact-next.surface-light { padding-block:48px; border-color:var(--paper-line); }
.contact-next.surface-light ol { color:var(--paper-muted); }
@media(hover:hover) {
  :is(.surface-light,.surface-light-panel) .btn:hover:not(:where(.surface-dark *)) { background:#293e48; border-color:#293e48; color:#fff; }
  :is(.surface-light,.surface-light-panel) .btn-secondary:hover:not(:where(.surface-dark *)) { background:var(--paper-recessed); border-color:var(--paper-control); color:var(--paper-ink); }
  .surface-light-panel .chip:hover .chip-face { background:var(--paper); }
  .surface-light-panel .chip input:checked + .chip-face { background:var(--paper-recessed); }
  .surface-light .text-link:hover { color:var(--paper-accent); }
}
@media(max-width:759px) {
  .work-index-section.surface-light, .services-overview.surface-light { padding-top:40px; }
  .page-studio .founder-section.surface-light { padding-top:50px; }
  .contact-next.surface-light { padding-block:35px; }
}
@media(forced-colors:active) {
  :is(.surface-light,.surface-light-panel), .surface-light::before { background:Canvas; color:CanvasText; box-shadow:none; }
  :is(.surface-light,.surface-light-panel) .btn { border-color:ButtonText; }
}
/* A dark evidence card focuses against the surrounding white reading surface. */
.surface-light .surface-dark:focus-visible { outline-color: var(--paper-accent); }
/* Enlarged reading text can break a long word rather than leave the viewport. */
:is(.surface-light,.surface-light-panel) :is(h1,h2,h3) { overflow-wrap:anywhere; }