/* System-responsive contrast support. Default presentation is intentionally untouched. */

@media (prefers-contrast: more) {
  :root {
    --contrast-ink: #1f1f1f;
    --contrast-muted: #4a4a4a;
    --contrast-divider: #6b6b6b;
    --contrast-line: #767676;
    --contrast-focus: #005fcc;
  }

  body,
  .body,
  .paragraph,
  .gallerydesript,
  .contact,
  .contact-copy,
  .literati-case-copy,
  .about-copy__text,
  .m-ob-page {
    color: var(--contrast-ink);
  }

  a,
  a:visited,
  .nav-link-2,
  .pwba-item.anything,
  .pwba-item.anywhere,
  .contact-item-label,
  .galleryintro-meta,
  .galleryintro .written-by,
  .galleryintro .contact-copy,
  .gallery-grid-caption,
  .clay-case-caption,
  .literati-original figcaption,
  .primary-list .sidenav-links,
  .secondary-list .sidenav-links {
    color: var(--contrast-muted) !important;
  }

  html .sidebar .sidenav-links[data-writing-link] {
    color: var(--contrast-muted) !important;
    opacity: 1 !important;
  }

  body.clay-gallery-handoff .sidebar .sidenav-links[data-writing-link] {
    opacity: var(--project-sidebar-item-opacity, 1) !important;
  }

  html[data-wf-page="699399b79cdbf4a502805ffc"] .sidebar .sidenav-links[data-writing-link] {
    opacity: var(--project-sidebar-item-opacity, 0) !important;
  }

  .sidenav-links[data-writing-link] > :first-child {
    text-decoration: line-through;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
  }

  .sidenav-links[data-writing-link]:is(:hover, :focus-visible, [data-sidebar-interaction-owner], [data-writing-tag-owner]) > :first-child {
    text-decoration: none;
  }

  .sidenav-links[data-writing-tag-owner]::after {
    border: 1px solid var(--contrast-line);
    background: #fff;
    color: var(--contrast-ink);
  }

  .nav-divider,
  .hero-wfa-wf,
  .m-ob-pwba i,
  .m-ob-wajc > span,
  .m-ob-contact-links span {
    color: var(--contrast-divider) !important;
  }

  .gallery-grid-caption strong,
  .text-block-19 strong,
  .contact-headline,
  .heading-2,
  .m-ob-work-list p strong,
  .m-ob-about-copy strong,
  .m-ob-contact-copy h2 {
    color: var(--contrast-ink) !important;
  }

  .m-ob-page {
    --m-ob-ink: var(--contrast-ink);
    --m-ob-body: #383838;
    --m-ob-muted: var(--contrast-muted);
    --m-ob-line: var(--contrast-divider);
  }

  .m-ob-desktop-notice::before,
  .m-ob-pills > span,
  .about-chip::before,
  .text-tip,
  .mac-hotkey-tip,
  .clay-case-use-cases {
    border-color: var(--contrast-line) !important;
  }

  .scroll-indicator,
  body.client-page-direct .scroll-indicator {
    background: #f4f4f4 !important;
    outline: 1px solid #000;
    outline-offset: 1px;
  }

  .scroll-indicator-thumb,
  body.client-page-direct .scroll-indicator-thumb {
    background: #000 !important;
  }

  .scroll-indicator-thumb.in-new-experiment {
    background: #ddd !important;
    outline: 1px solid #000;
    outline-offset: 1px;
  }

  .scroll-indicator-thumb.in-new-experiment .scroll-indicator-sub {
    background: #000 !important;
  }

  .hero-line {
    background: #000 !important;
    opacity: 1 !important;
  }

  .hero-line::before,
  .hero-line::after {
    background: #000 !important;
  }

  .paragraph a,
  .gallerydesript a,
  .clay-case-copy a,
  .literati-case-copy a,
  .about-inline-link__text,
  .m-ob-about-copy a,
  .m-ob-contact-links a,
  .contact-content a {
    color: var(--contrast-ink) !important;
    text-decoration-line: underline !important;
    text-decoration-color: currentColor !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }

  .m-ob-tab {
    color: var(--contrast-muted);
  }

  .m-ob-tab.is-active,
  .m-ob-tab[aria-selected="true"] {
    color: var(--contrast-ink);
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .article-preview-button,
  .m-ob-desktop-notice-copy-button,
  .about-chip {
    color: var(--contrast-ink);
  }

  :where(a, button, [role="button"], [role="tab"], [tabindex]):focus-visible,
  [data-steph-lightbox-target]:focus-visible,
  .scroll-indicator-link:focus-visible,
  .gallery-pow-viewport:focus-visible,
  .project-next-keyboard-control:focus-visible,
  [data-literati-card]:has(> img:focus-visible) {
    outline: 3px solid var(--contrast-focus) !important;
    outline-offset: 3px !important;
  }

  .steph-image-lightbox {
    background: rgb(0 0 0 / 92%);
  }

  .steph-image-lightbox__stage,
  .m-ob-image-lightbox__stage {
    outline: 2px solid #efefef;
    outline-offset: -2px;
  }

  .steph-image-lightbox__navigation:focus-visible,
  .steph-image-lightbox__zoom:focus-visible,
  .steph-image-lightbox__close:focus-visible,
  .m-ob-image-lightbox__close:focus-visible {
    outline-color: #fff !important;
    box-shadow: 0 0 0 2px #000;
  }

  .steph-image-lightbox__close,
  .m-ob-image-lightbox__close {
    background-color: rgb(0 0 0 / 78%);
  }

  .about-copy__text {
    background: #fff;
    box-shadow: 0 0 0 4px #fff;
    filter: none;
    mix-blend-mode: normal;
  }

  .michelin-cell:focus-visible {
    outline-offset: -4px !important;
  }

  :where(button, input, select, textarea)[disabled],
  [aria-disabled="true"] {
    color: #5f5f5f !important;
    border-color: #767676 !important;
  }
}

@media (forced-colors: active) {
  :root {
    --white: Canvas;
    --m-ob-ink: CanvasText;
    --m-ob-body: CanvasText;
    --m-ob-muted: GrayText;
    --m-ob-line: ButtonText;
  }

  html,
  body,
  .body,
  .hero-section,
  .new-experiment,
  .content-section,
  .sidebar,
  .sidebar-collapsed,
  .sidebar-collapsed-copy,
  .m-ob-page,
  .m-ob-shell,
  .m-ob-panel,
  .about-page,
  .about-copy__text,
  .steph-image-lightbox,
  .m-ob-image-lightbox {
    background: Canvas !important;
    color: CanvasText !important;
  }

  body,
  p,
  .body,
  .paragraph,
  .gallerydesript,
  .galleryintro-meta,
  .gallery-grid-caption,
  .gallery-grid-caption strong,
  .clay-case-caption,
  .contact,
  .contact-copy,
  .contact-item-label,
  .contact-headline,
  .heading-2,
  .nav-link,
  .nav-link-2,
  .pwba-item.anything,
  .pwba-item.anywhere,
  .sidenav-links,
  .literati-case-copy,
  .literati-original figcaption,
  .about-copy__text,
  .about-copy strong,
  .galleryintro .written-by,
  .galleryintro .contact-copy,
  .about-chip,
  .m-ob-page,
  .m-ob-page p,
  .m-ob-page strong,
  .m-ob-page dt,
  .m-ob-page dd {
    color: CanvasText !important;
  }

  a,
  a:visited,
  .paragraph a,
  .gallerydesript a,
  .clay-case-copy a,
  .literati-case-copy a,
  .about-inline-link,
  .about-inline-link__text,
  .m-ob-page a {
    color: LinkText !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }

  a:visited,
  .m-ob-page a:visited {
    color: VisitedText !important;
  }

  html .sidebar .sidenav-links[data-writing-link] {
    color: CanvasText !important;
    opacity: 1 !important;
  }

  body.clay-gallery-handoff .sidebar .sidenav-links[data-writing-link] {
    opacity: var(--project-sidebar-item-opacity, 1) !important;
  }

  html[data-wf-page="699399b79cdbf4a502805ffc"] .sidebar .sidenav-links[data-writing-link] {
    opacity: var(--project-sidebar-item-opacity, 0) !important;
  }

  .sidenav-links[data-writing-link] > :first-child {
    text-decoration: line-through;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
  }

  .sidenav-links[data-writing-link]:is(:hover, :focus-visible, [data-sidebar-interaction-owner], [data-writing-tag-owner]) > :first-child {
    text-decoration: none;
  }

  .sidenav-links[data-writing-tag-owner]::after {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .nav-divider,
  .m-ob-pwba i,
  .m-ob-wajc > span,
  .m-ob-contact-links span {
    color: GrayText !important;
  }

  .heading,
  .pwba-sticky-child,
  .about-title,
  .about-copy__text,
  .steph-image-lightbox__close {
    filter: none !important;
    mix-blend-mode: normal !important;
  }

  .m-ob-desktop-notice::before,
  .m-ob-pills > span,
  .about-chip::before,
  .text-tip,
  .mac-hotkey-tip,
  .clay-case-use-cases,
  .steph-image-lightbox__stage,
  .m-ob-image-lightbox__stage {
    border: 1px solid ButtonText !important;
  }

  .about-chip::before,
  .m-ob-desktop-notice,
  .m-ob-pills > span,
  .text-tip,
  .mac-hotkey-tip {
    background: ButtonFace !important;
  }

  .article-preview-button,
  .m-ob-tab,
  .m-ob-desktop-notice-copy-button,
  .about-chip,
  .steph-image-lightbox__close,
  .m-ob-image-lightbox__close {
    border: 1px solid ButtonText !important;
    background: ButtonFace !important;
    color: ButtonText !important;
  }

  .m-ob-tab.is-active,
  .m-ob-tab[aria-selected="true"],
  .about-chip[aria-expanded="true"] {
    border-color: Highlight !important;
    color: Highlight !important;
  }

  :where(a, button, [role="button"], [role="tab"], [tabindex]):focus-visible,
  [data-steph-lightbox-target]:focus-visible,
  .scroll-indicator-link:focus-visible,
  .gallery-pow-viewport:focus-visible,
  .project-next-keyboard-control:focus-visible,
  [data-literati-card]:has(> img:focus-visible) {
    outline: 3px solid Highlight !important;
    outline-offset: 3px !important;
  }

  .michelin-cell:focus-visible {
    outline-offset: -4px !important;
  }

  .scroll-indicator,
  body.client-page-direct .scroll-indicator {
    background: Canvas !important;
    outline: 1px solid CanvasText;
    outline-offset: 1px;
  }

  .scroll-indicator-thumb,
  body.client-page-direct .scroll-indicator-thumb {
    background: CanvasText !important;
  }

  .scroll-indicator-thumb.in-new-experiment {
    background: Canvas !important;
    outline: 1px solid CanvasText;
    outline-offset: 1px;
  }

  .scroll-indicator-thumb.in-new-experiment .scroll-indicator-sub {
    background: CanvasText !important;
    opacity: 1;
  }

  .hero-line {
    background: CanvasText !important;
    opacity: 1 !important;
  }

  .hero-line::before,
  .hero-line::after {
    background: CanvasText !important;
  }

  .steph-image-lightbox__close img {
    display: none;
  }

  .steph-image-lightbox__close::after {
    content: "×";
    color: ButtonText;
    font: 28px/1 sans-serif;
  }

  :where(button, input, select, textarea)[disabled],
  [aria-disabled="true"] {
    color: GrayText !important;
    border-color: GrayText !important;
    opacity: 1 !important;
  }
}

@media (prefers-contrast: more), (forced-colors: active) {
  .contrast-mode-notice {
    position: fixed;
    inset: 0 0 auto;
    z-index: 2147483646;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 24px;
    align-items: center;
    min-height: 28px;
    padding: 3px 8px;
    box-sizing: border-box;
    border-bottom: 1px solid #fff;
    background: #000;
    color: #fff;
    font: 500 11px/1.35 Inter, Arial, sans-serif;
    letter-spacing: .01em;
  }

  .contrast-mode-notice__message {
    text-align: center;
  }

  .contrast-mode-notice__close {
    display: grid;
    width: 24px;
    height: 22px;
    padding: 0;
    place-items: center;
    border: 0;
    background: transparent;
    color: inherit;
    font: 400 18px/1 Arial, sans-serif;
    cursor: pointer;
  }

  .contrast-mode-notice__close:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: -2px !important;
  }
}

@media (forced-colors: active) {
  .contrast-mode-notice {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .contrast-mode-notice__close {
    border: 1px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
}

/* No focus rings (Steph, 2026-09-29), except in high-contrast mode: the OS
   setting (prefers-contrast: more / forced colors) or the #high-contrast
   preview, which js/accessibility-contrast.js marks with a style element. */
@media (prefers-contrast: no-preference) and (forced-colors: none) {
  :root:not(:has(style[data-contrast-hash-preview])) *:focus,
  :root:not(:has(style[data-contrast-hash-preview])) *:focus-visible {
    outline: none !important;
  }
  :root:not(:has(style[data-contrast-hash-preview])) .w-slider-dot:focus {
    box-shadow: none !important;
  }
}