/* Original progressive-enhancement components; all colours come from the existing theme. */
:root { --ux-duration: 260ms; }
body { --ux-surface: var(--black-soft); --ux-text: var(--white); --ux-muted: var(--muted); --ux-rule: var(--line-dark); --ux-highlight: var(--accent); }
body.case-page { --ux-surface: var(--paper); --ux-text: var(--ink); --ux-muted: var(--case-muted); --ux-rule: var(--line-light); --ux-highlight: var(--ink); }
.ux-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ux-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; flex: none; }
:where(a,button,input,select,summary):focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.site-nav a[aria-current]::after { transform: scaleX(1); }
.site-nav.ux-sliding a::after { content: none; }
.ux-indicator { position: absolute; pointer-events: none; height: 2px; bottom: 0; left: 0; width: var(--ux-marker-width,0px); transform: translateX(var(--ux-marker-left,0px)); background: currentColor; opacity: var(--ux-marker-opacity,0); transition: transform var(--ux-duration) var(--ease-out), width var(--ux-duration) var(--ease-out), opacity 160ms; }
.site-nav.ux-sliding { position: relative; }
.ux-reading-progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 120; transform-origin: left; transform: scaleX(var(--ux-reading,0)); background: var(--ux-highlight); pointer-events: none; }
html[dir="rtl"] .ux-reading-progress { transform-origin: right; }
.ux-search-trigger { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--ux-rule); border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: border-color var(--ux-duration), color var(--ux-duration); }
.ux-search-trigger:hover { border-color: currentColor; }
.ux-menu-search { display: none; }
.ux-project-tools { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 28px 0 20px; }
.ux-project-categories { position: relative; display: flex; gap: 24px; flex-shrink: 0; border-bottom: 1px solid var(--ux-rule); color: inherit; }
.ux-project-categories button { min-height: 44px; border: 0; background: none; padding: 8px 0 12px; color: var(--ux-muted); font-size: .8rem; cursor: pointer; white-space: nowrap; }
.ux-project-categories button[aria-pressed="true"] { color: inherit; }
.ux-project-categories small { margin-inline-start: 7px; font-size: .65rem; font-variant-numeric: tabular-nums; opacity: .65; }
.ux-project-search { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--ux-rule); min-height: 44px; width: min(100%,310px); }
.ux-project-search input { width: 100%; min-width: 0; border: 0; background: none; color: inherit; padding: 10px 0; font-size: .83rem; }
.ux-project-search input::placeholder { color: var(--ux-muted); opacity: 1; }
.ux-project-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.ux-project-search:focus-within { border-bottom: 2px solid var(--ux-highlight); }
.ux-project-search input:focus-visible { outline: none; }
.project-list.is-filtered .project-row { opacity: 1; transform: none; filter: none; clip-path: none; transition: background 220ms,color 220ms,padding 220ms; }
.ux-project-reset { display: grid; place-items: center; width: 32px; min-height: 36px; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; font-size: 1.2rem; }
.ux-project-status { color: var(--ux-muted); font-size: .76rem; margin: 0 0 15px; }
.ux-project-empty { border-block: 1px solid var(--ux-rule); padding: 32px 0; font-size: .94rem; }
.project-row:focus-visible .project-row__preview { transform: translateY(-50%) scale(1); opacity: 1; }
.project-row:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.project-row__arrow,.case-button svg,.pill-link { transition: transform var(--ux-duration) var(--ease-out), background var(--ux-duration), color var(--ux-duration); }
@media (hover:hover) and (pointer:fine) {
  .case-button:hover svg { translate: 3px -2px; }
  html[dir="rtl"] .case-button:hover svg { translate: -3px -2px; }
  .pill-link:hover { transform: translateY(-2px); }
  .journal-card:focus-within img { filter: grayscale(0); }
}
.case-button:active,.pill-link:active { scale: .985; }
.case-contents__links,.case-gallery-tools { position: relative; }
.case-contents__links.ux-sliding>a[aria-current],.case-gallery-tools.ux-sliding button[aria-pressed="true"] { border-bottom-color: transparent; }
.case-gallery-tools .case-gallery-status { margin-inline-start: auto; align-self: center; font-size: .72rem; color: var(--case-muted); }
.case-lightbox__thumbs { display: flex; justify-content: flex-start; gap: 8px; overflow-x: auto; padding: 8px 16px 14px; direction: ltr; scrollbar-width: thin; }
.case-lightbox__thumbs button { flex: 0 0 72px; width: 72px; height: 46px; opacity: .55; border: 1px solid var(--line-dark); overflow: hidden; transition: opacity 180ms,border-color 180ms; }
.case-lightbox__thumbs button[aria-pressed="true"],.case-lightbox__thumbs button:hover { opacity: 1; border-color: var(--white); }
.case-lightbox__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.case-lightbox__stage { position: relative; max-height: calc(92svh - 190px); min-height: 100px; }
.case-lightbox__stage>img { max-height: calc(92svh - 190px); }
.case-lightbox__stage:not(.is-natural-size) { touch-action: pan-y; }
.case-lightbox.is-natural-size .case-lightbox__stage { touch-action: auto; }
.case-lightbox.is-natural-size .case-lightbox__stage>img { max-height: none; }
.case-lightbox__status { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 12px 18px; background: var(--black-soft); color: var(--white); font-size: .84rem; text-align: center; }
.case-lightbox__stage.is-loading>img { opacity: .25; }
.case-lightbox__stage.is-image-error>img { visibility: hidden; }
.case-questions summary>span:last-child { transition: transform var(--ux-duration) var(--ease-out); }
.ux-contact-action { display: inline-flex; gap: 5px; align-items: stretch; max-width: 100%; }
.ux-copy { display: grid; place-items: center; width: 40px; min-height: 44px; background: transparent; border: 1px solid var(--ux-rule); color: inherit; border-radius: 50%; cursor: pointer; }
.case-contact .ux-copy { border-radius: 0; }
.ux-copy:hover { border-color: currentColor; }
.ux-toast { position: fixed; inset-inline-end: 24px; bottom: 24px; z-index: 140; width: max-content; max-width: calc(100vw - 48px); margin: 0; padding: 12px 20px; border: 1px solid var(--ux-rule); background: var(--ux-surface); color: var(--ux-text); font-size: .83rem; box-shadow: 0 10px 32px rgba(0,0,0,.2); }
.ux-top { position: fixed; inset-inline-end: 20px; bottom: 20px; z-index: 25; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--ux-rule); background: var(--ux-surface); color: var(--ux-text); border-radius: 50%; cursor: pointer; }
.ux-command { padding: 0; margin: 15svh auto auto; width: min(600px,calc(100vw - 36px)); max-height: 72svh; overflow: hidden; border: 1px solid var(--ux-rule); background: var(--ux-surface); color: var(--ux-text); box-shadow: 0 30px 100px rgba(0,0,0,.35); }
.ux-command::backdrop { background: rgba(7,7,7,.65); backdrop-filter: blur(7px); }
.ux-command[open] { animation: ux-command-in 180ms var(--ease-out); }
.ux-command__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--ux-rule); }
.ux-command input { min-width: 0; flex: 1; background: none; border: 0; color: inherit; min-height: 36px; padding: 0; font-size: .96rem; }
.ux-command input::placeholder { color: var(--ux-muted); opacity: 1; }
.ux-command__close { border: 1px solid var(--ux-rule); background: none; color: inherit; min-height: 34px; min-width: 36px; cursor: pointer; font-size: .7rem; }
.ux-command__list { padding: 8px; max-height: 46svh; overflow-y: auto; margin: 0; list-style: none; overscroll-behavior: contain; }
.ux-command__list a { display: flex; align-items: center; gap: 16px; padding: 12px; min-height: 48px; font-size: .9rem; }
.ux-command__list a:hover,.ux-command__list a:focus-visible { background: var(--ux-text); color: var(--ux-surface); outline-offset: -2px; }
.ux-command__list a>span:last-child { margin-inline-start: auto; font-size: .66rem; opacity: .6; }
.ux-command__hint { border-top: 1px solid var(--ux-rule); display: flex; justify-content: space-between; gap: 12px; padding: 12px 20px; font-size: .7rem; color: var(--ux-muted); }
.ux-command__empty { padding: 24px 16px; font-size: .9rem; }
body.is-command-open { overflow: hidden; }
@keyframes ux-command-in { from { opacity: 0; transform: translateY(-8px); } }
@media(max-width:920px) {
  .header-tools>.ux-search-trigger { display: none; }
  .ux-menu-search { display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--ux-rule); background: none; color: inherit; min-height: 44px; padding: 12px 16px; cursor: pointer; text-align: start; margin-top: 12px; }
  .site-nav.is-open { animation: ux-command-in 200ms var(--ease-out); }
  .site-nav.ux-sliding { position: fixed; }
  .site-nav>.ux-indicator { display: none; }
  .site-nav a[aria-current] { text-decoration: underline; text-underline-offset: 7px; }
  .site-nav a { min-height: 44px; display: flex; align-items: center; font-size: .9rem; }
  .project-row__preview { display: none !important; }
}
@media(max-width:620px) {
  .ux-project-tools { align-items: stretch; flex-direction: column; gap: 16px; margin-top: 20px; }
  .ux-project-categories { gap: 24px; }
  .ux-project-search { width: 100%; }
  .case-gallery-tools { gap: 18px; flex-wrap: wrap; }
  .case-gallery-tools .case-gallery-status { font-size: .67rem; }
  .ux-command { margin-top: 9svh; }
  .ux-command__head { padding: 12px; gap: 9px; }
  .ux-command input { font-size: .85rem; }
  .ux-command__hint { padding-inline: 12px; font-size: .66rem; }
  .ux-top { bottom: 16px; inset-inline-end: 16px; }
}
@media(prefers-reduced-motion:reduce) {
  .ux-indicator,.case-button,.case-button svg,.pill-link,.case-lightbox__thumbs button,.case-questions summary>span:last-child { transition: none; }
  .ux-command[open],.site-nav.is-open { animation: none; }
}