/* Case studies use the existing portfolio typefaces. No background animation. */
.st-case-open { pointer-events: auto; display: block; appearance: none; background: none; border: 0; padding: 10px 0; margin: 9px 0 0; color: var(--paper, #f4ead0); font: 11px 'JetBrains Mono', monospace; cursor: pointer; text-align: inherit; }
.st-case-open:disabled { pointer-events: none; }
.st-case-open span { padding-left: 12px; }
.st-cap.flip .st-case-open { margin-left: auto; }
.st-project-index { appearance: none; background: none; border: 0; color: #eee7d8; font: 10px 'JetBrains Mono', monospace; cursor: pointer; pointer-events: auto; margin-left: auto; margin-right: 28px; }
.st-project-index span { padding-left: 8px; }
.st-case-open:focus-visible, .st-project-index:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }
.work-case-reader { --case-accent: #c1593d; width: min(1240px, calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 48px); padding: 0; margin: auto; border: 0; background: #f3f0e8; color: #252821; overflow: auto; overscroll-behavior: contain; scrollbar-color: #b8b4a8 #f3f0e8; }
.work-case-reader::backdrop { background: #080907d9; }
.work-case-reading .cursor, .work-case-reading .cursor-follower, .work-case-reading .st-cursor { display: none !important; }
.wcr-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 36px; background: #f3f0e8; border-bottom: 1px solid #25282126; }
.wcr-label, .wcr-picker, .wcr-close { font: 10px 'JetBrains Mono', monospace; }
.wcr-label { text-transform: uppercase; letter-spacing: .08em; color: #726e62; }
.wcr-picker { margin-left: auto; min-width: 0; max-width: 240px; background: transparent; color: #252821; border: 1px solid #25282140; border-radius: 0; padding: 8px; }
.wcr-close { appearance: none; color: #252821; background: none; border: 0; padding: 10px 0 10px 14px; cursor: pointer; white-space: nowrap; }
.wcr-body { padding: clamp(32px, 5vw, 68px); }
.wcr-category { font: 11px 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .07em; color: var(--case-accent); margin: 0 0 18px; }
.wcr-title { font: 600 clamp(40px, 6vw, 78px)/1.05 var(--font-display); letter-spacing: -.055em; margin: 0 0 20px; overflow-wrap: anywhere; }
.wcr-meta { font: 11px/1.8 'JetBrains Mono', monospace; color: #726e62; padding-bottom: 28px; border-bottom: 1px solid #25282126; }
.wcr-overview { display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px; margin: 30px 0 24px; }
.wcr-overview h3 { font: 10px 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 14px; color: #726e62; }
.wcr-overview p { font: 16px/1.75 var(--font-sans, 'Inter', sans-serif); color: #4a4e45; margin: 0; }
.wcr-role { font: 11px/1.8 'JetBrains Mono', monospace; color: #252821; margin: 0 0 20px; }
.wcr-links { display: flex; flex-wrap: wrap; gap: 18px 32px; margin-bottom: 30px; }
.wcr-links a { font: 12px/1.8 'JetBrains Mono', monospace; text-decoration: underline; text-underline-offset: 5px; color: #252821; overflow-wrap: anywhere; }
.wcr-links a[hidden] { display: none; }
.wcr-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; align-items: start; }
.wcr-shot { margin: 0; min-width: 0; }
.wcr-hero { margin-bottom: 38px; }
.wcr-shot img { width: 100%; height: auto; display: block; background: #e8e5dc; border: 1px solid #25282118; }
.wcr-shot--portrait img { max-height: 660px; object-fit: contain; }
.wcr-shot figcaption { font: 10px/1.6 'JetBrains Mono', monospace; color: #726e62; padding-top: 11px; }
.work-case-reader :is(a, button, select):focus-visible { outline: 2px solid #8a603f; outline-offset: 4px; }
@media (max-width: 700px) {
  .st-project-index { font-size: 9px; margin-right: 0; }
  .st-project-index + .cf-gh { display: none; }
  .work-case-reader { width: 100vw; max-height: 100dvh; height: 100dvh; }
  .wcr-bar { gap: 12px; padding: 14px 20px; }
  .wcr-label { display: none; }
  .wcr-picker { margin-left: 0; flex: 1; max-width: 250px; }
  .wcr-body { padding: 32px 22px 48px; }
  .wcr-overview { grid-template-columns: 1fr; gap: 24px; }
  .wcr-overview p { font-size: 15px; }
  .wcr-gallery { grid-template-columns: 1fr; gap: 28px; }
}