@font-face {
  font-family: ABC Areal;
  src: url('../fonts/ABCAreal-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  font-family:
    ABC Areal,
    Helvetica,
    Arial,
    sans-serif;
  color: #1c1c1e;
  background: #fcfcfc;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  overflow: hidden;
}
h1,
p {
  margin: 0;
  font: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  opacity: 0.5;
}
a {
  transition:
    opacity 200ms cubic-bezier(0.65, 0, 0.35, 1),
    color 200ms cubic-bezier(0.65, 0, 0.35, 1);
}
a:focus-visible,
.info-toggle:focus-visible {
  outline: none;
}
.header {
  position: fixed;
  inset: 12px 12px auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, max-content);
  width: calc(100% - 24px);
  gap: 12px;
  z-index: 5;
  pointer-events: none;
  font-size: 0.75rem;
  line-height: 1.3;
}
.panel {
  border-radius: 8px;
  pointer-events: auto;
  align-self: stretch;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.panel > * {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.muted {
  opacity: 0.5;
}
.gallery {
  position: fixed;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  outline: none;
}
.gallery:active {
  cursor: grabbing;
}
.track {
  position: absolute;
  inset: 0;
  user-select: none;
}
.card {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  width: 330px;
  height: 440px;
  overflow: hidden;
  border-radius: 8px;
  will-change: transform;
  backface-visibility: hidden;
  background: #f7f7f7;
}
.card img,
.card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.card video {
  position: absolute;
  inset: 0;
}
.card-coming-soon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 33px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 8px;
  background: rgba(247, 247, 247, .2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #1c1c1e;
  font-size: .75rem;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--hover-duration, 200ms) var(--ui-ease, cubic-bezier(.65, 0, .35, 1));
}
.cursor-coming-soon {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 20;
  transform: translate3d(-200px, -200px, 0);
}
@media (hover: hover) {
  .cursor-coming-soon.is-visible { opacity: 1; }
}
.card:focus-visible .card-coming-soon { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .card-coming-soon { transition: none; }
}
.edge {
  position: absolute;
  top: -64px;
  bottom: -64px;
  width: clamp(64px, 10vw, 160px);
  pointer-events: none;
  z-index: 2;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.edge-left {
  left: 0;
  mask-image: linear-gradient(to right, #000, transparent);
  -webkit-mask-image: linear-gradient(to right, #000, transparent);
}
.edge-right {
  right: 0;
  mask-image: linear-gradient(to left, #000, transparent);
  -webkit-mask-image: linear-gradient(to left, #000, transparent);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.no-js {
  position: absolute;
  top: 45%;
  padding: 24px;
}

@media (prefers-reduced-motion: reduce) {
  a {
    transition: none;
  }
  .edge {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Navigation follows the approved four-panel Figma layout. */
.header {
  align-items: start;
}
.panel {
  height: 33px;
  padding: 12px;
  gap: 12px;
  align-items: center;
}
.home-link {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  justify-content: flex-start;
}
/* Frosted sky color field, revealed by the existing carousel progress. */
.home-progress {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--scroll-progress, 0) * 100%);
  pointer-events: none;
  overflow: visible;
  filter: blur(8px);
  opacity: clamp(0, calc(var(--scroll-progress, 0) * 80), 1);
}
.home-progress::before {
  content: '';
  position: absolute;
  inset: -14px -8px -14px -14px;
  background:
    radial-gradient(ellipse, rgba(218, 240, 252, 0.95), transparent 68%),
    radial-gradient(ellipse, rgba(111, 190, 244, 0.8), transparent 68%),
    radial-gradient(ellipse, rgba(190, 232, 252, 0.95), transparent 70%),
    linear-gradient(110deg, #cce9fa, #a9d7f5 48%, #bde1f6);
  background-size:
    65% 180%,
    70% 230%,
    60% 200%,
    100% 100%;
  background-repeat: no-repeat;
  filter: blur(12px);
  opacity: 0.88;
  clip-path: polygon(
    0 0,
    calc(100% - 12px) 0,
    calc(100% - 3px) 25%,
    calc(100% - 16px) 55%,
    100% 80%,
    calc(100% - 8px) 100%,
    0 100%
  );
  animation:
    home-frost-drift 7s ease-in-out infinite alternate,
    home-frost-edge 6s ease-in-out infinite alternate;
  /* Preserve its phase while the progress field is invisible. */
  animation-play-state: paused;
}
.home-link.has-visible-progress .home-progress::before {
  animation-play-state: running;
}
html.page-hidden .home-link .home-progress::before {
  animation-play-state: paused;
}
@keyframes home-frost-edge {
  from {
    clip-path: polygon(
      0 0,
      calc(100% - 12px) 0,
      calc(100% - 3px) 25%,
      calc(100% - 16px) 55%,
      100% 80%,
      calc(100% - 8px) 100%,
      0 100%
    );
  }
  to {
    clip-path: polygon(
      0 0,
      calc(100% - 3px) 0,
      calc(100% - 17px) 25%,
      100% 55%,
      calc(100% - 13px) 80%,
      calc(100% - 2px) 100%,
      0 100%
    );
  }
}
@keyframes home-frost-drift {
  from {
    background-position:
      -30% 0%,
      75% 100%,
      135% 0%,
      0 0;
  }
  to {
    background-position:
      100% 100%,
      -15% 0%,
      35% 100%,
      0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-progress::before {
    animation: none;
  }
}
.home-link h1 {
  position: relative;
  z-index: 1;
  color: #1c1c1e;
  mix-blend-mode: normal;
  opacity: 0.5;
  white-space: nowrap;
  transition: opacity var(--hover-duration, 200ms)
    var(--ui-ease, cubic-bezier(0.65, 0, 0.35, 1));
}
.home-link:hover {
  opacity: 1;
}
.home-link:hover h1,
.home-link:focus-visible h1 {
  opacity: 1;
  text-decoration: none;
}

.info-panel {
  position: relative;
  display: block;
  padding: 0;
}
.info-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  height: 33px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  opacity: 0.5;
  line-height: 1.3;
  transition: opacity var(--hover-duration, 200ms)
    var(--ui-ease, cubic-bezier(0.65, 0, 0.35, 1));
}
.info-toggle:hover,
.info-toggle:focus-visible {
  opacity: 1;
}
.info-reveal {
  position: absolute;
  top: 41px;
  left: auto;
  right: 0;
  width: min(320px, calc(100vw - 24px));
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--info-duration, 625ms)
    var(--panel-ease, cubic-bezier(0.85, 0, 0.15, 1));
  background: rgba(247, 247, 247, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 8px;
}
.info-clip {
  overflow: hidden;
  min-height: 0;
}
.info-content {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  line-height: 1.3;
}
.info-content p,
.info-content a {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.info-content p {
  margin-bottom: 8px;
}
.info-content > * {
  opacity: 0;
  transform: translateY(15px);
  transition:
    opacity var(--text-duration, 400ms) var(--ui-ease),
    transform var(--text-duration, 400ms) var(--ui-ease);
}
.info-content a {
  width: max-content;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.info-panel.is-open .info-reveal {
  grid-template-rows: 1fr;
}
.info-panel.is-open .info-content > * {
  opacity: 1;
  transform: none;
  transition-delay: var(--cell-delay, 125ms);
}
.info-panel.is-open .info-content > :nth-child(2) {
  transition-delay: calc(var(--cell-delay, 125ms) * 2);
}
.info-panel.is-open .info-content > :nth-child(3) {
  transition-delay: calc(var(--cell-delay, 125ms) * 3);
}
.info-panel.is-open .info-content a {
  opacity: 0.5;
}
.info-panel.is-open .info-content a:hover,
.info-panel.is-open .info-content a:focus-visible {
  opacity: 1;
  transition-delay: 0ms;
}
.notwork-link {
  white-space: nowrap;
}
.notwork-link span:last-child {
  text-decoration: none;
}
@media (max-width: 420px) {
  .header {
    grid-template-columns: minmax(0, 1fr) repeat(3, max-content);
    gap: 6px;
  }
  .panel {
    padding-inline: 8px;
  }
  .info-panel {
    padding: 0;
  }
  .info-toggle {
    padding-inline: 8px;
  }
  .info-reveal {
    left: auto;
    right: 0;
    width: calc(100vw - 24px);
  }
  .projects-panel {
    display: none;
  }
  .edge {
    width: 56px;
  }
}
@media (max-width: 360px) {
  .header {
    inset: 12px 8px auto;
    width: calc(100% - 16px);
    gap: 4px;
  }
  .panel {
    padding-inline: 5px;
  }
  .info-panel {
    padding: 0;
  }
  .info-toggle {
    padding-inline: 8px;
  }
  .info-reveal {
    width: calc(100vw - 16px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .info-reveal,
  .info-toggle,
  .info-content > *,
  .home-link h1 {
    transition: none !important;
  }
  .info-content > * {
    transform: none;
  }
}

@media (min-width: 421px) and (max-width: 1000px) {
  .notwork-link {
    justify-content: flex-end;
  }
}

@supports not (text-box-trim: trim-both) {
  .info-content p,
  .info-content a {
    margin-block: -3.3px;
  }
  .info-content p {
    margin-bottom: 4.7px;
  }
}
@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .info-reveal {
    background: #f7f7f7;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .info-reveal {
    background: #f7f7f7;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* One glass surface for every navigation bar and its disclosure. A pseudo-layer
   keeps parent backdrop isolation from preventing the dropdown's own blur. */
.panel {
  background: transparent;
  position: relative;
  isolation: isolate;
}
.panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(247, 247, 247, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  pointer-events: none;
}
.projects-content p {
  margin-bottom: 0;
}
.projects-panel .info-reveal {
  width: 160px;
}
@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .panel::before {
    background: #f7f7f7;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .panel::before {
    background: #f7f7f7;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Keep navigation panels within the available width on compact screens. */
.header > .panel {
  min-width: 0;
}

/* Archive color field. Legacy notwork selectors are shared with the existing
   page controllers; retain them while organizing styles. */
.notwork-link {
  overflow: hidden;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}
.notwork-link > span {
  position: relative;
  z-index: 1;
  transition: opacity var(--hover-duration, 200ms)
    var(--ui-ease, cubic-bezier(0.65, 0, 0.35, 1));
}
.notwork-link::after {
  content: '';
  position: absolute;
  inset: -12px;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse, rgba(242, 168, 195, 0.95), transparent 65%),
    radial-gradient(ellipse, rgba(146, 212, 209, 0.9), transparent 65%),
    radial-gradient(ellipse, rgba(143, 204, 242, 0.95), transparent 65%),
    radial-gradient(ellipse, rgba(249, 220, 146, 0.9), transparent 65%);
  background-size:
    8% 30%,
    10% 25%,
    8% 30%,
    10% 25%;
  background-repeat: no-repeat;
  transition:
    opacity 1400ms ease-out,
    background-size 1800ms ease-out;
  animation: notwork-color-drift 4s ease-in-out infinite alternate;
}
@keyframes notwork-color-drift {
  0% {
    background-position:
      -40% 20%,
      30% 100%,
      140% 0%,
      100% 100%;
  }
  50% {
    background-position:
      35% 90%,
      110% 0%,
      20% 100%,
      -30% 0%;
  }
  100% {
    background-position:
      130% 0%,
      -40% 100%,
      70% 10%,
      30% 90%;
  }
}
@media (hover: hover) {
  .notwork-link:hover::after {
    opacity: 0.8;
    background-size:
      75% 240%,
      80% 260%,
      75% 240%,
      70% 220%;
  }
  .notwork-link:hover > span:last-child {
    opacity: 1;
  }
}
.notwork-link:focus-visible::after,
.notwork-link.is-selected::after,
.notwork-link[aria-current='page']::after {
  opacity: 0.8;
  background-size:
    75% 240%,
    80% 260%,
    75% 240%,
    70% 220%;
}
.notwork-link:focus-visible > span:last-child,
.notwork-link.is-selected > span:last-child,
.notwork-link[aria-current='page'] > span:last-child {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .notwork-link::after {
    animation: none;
    transition: none;
  }
  .notwork-link > span {
    transition: none;
  }
}

/* Detached disclosures share the viewport inset on compact screens. */
@media (max-width: 600px) {
  .info-reveal,
  .projects-panel .info-reveal {
    position: fixed;
    top: 53px;
    left: 12px;
    right: 12px;
    width: auto;
  }
}
@media (max-width: 360px) {
  .info-reveal,
  .projects-panel .info-reveal {
    left: 8px;
    right: 8px;
  }
}

/* Shared 400ms / 15px text motion, with stable centered resting geometry. */
.notwork-label {
  display: inline-grid;
}
.notwork-domain,
.notwork-soon {
  grid-area: 1 / 1;
  justify-self: center;
  transition:
    opacity var(--text-duration, 400ms)
      var(--ui-ease, cubic-bezier(0.65, 0, 0.35, 1)),
    transform var(--text-duration, 400ms)
      var(--ui-ease, cubic-bezier(0.65, 0, 0.35, 1));
}
.notwork-domain {
  transform: translateY(0);
}
.notwork-soon {
  opacity: 0;
  transform: translateY(15px);
}
@media (hover: hover) {
  .notwork-link:hover .notwork-domain {
    opacity: 0;
    transform: translateY(-15px);
  }
  .notwork-link:hover .notwork-soon {
    opacity: 1;
    transform: translateY(0);
  }
}
.notwork-link:focus-visible .notwork-domain,
.notwork-link.is-selected .notwork-domain {
  opacity: 0;
  transform: translateY(-15px);
}
.notwork-link:focus-visible .notwork-soon,
.notwork-link.is-selected .notwork-soon {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .notwork-link .notwork-domain,
  .notwork-link .notwork-soon {
    transition: none;
    transform: none;
  }
}

/* Keep the published Archive label visible. */
a.notwork-link {
  text-decoration: none;
}
a.notwork-link:hover {
  opacity: 1;
}
a.notwork-link .notwork-domain {
  opacity: 1 !important;
  transform: none !important;
}

/* Cached inactive views never receive input or obscure the active view. */
main[hidden] {
  display: none !important;
}

/* Dark colors for Lab, which retains the legacy notwork-page class. */
body.notwork-page {
  background: #111;
  color: #f7f7f7;
}
.notwork-page .panel::before {
  background: rgba(28, 28, 30, 0.7);
}
.notwork-page .home-link h1 {
  color: #f7f7f7;
}
.notwork-page .info-reveal {
  background: rgba(28, 28, 30, 0.7);
}

/* Shared blurred field: different hues, identical optical construction. */
.notwork-link {
  --field-a: 242, 168, 195;
  --field-b: 250, 196, 216;
  --field-c: 230, 133, 173;
  --field-d: 255, 221, 234;
}
.lab-link {
  --field-a: 138, 190, 255;
  --field-b: 173, 212, 255;
  --field-c: 103, 160, 242;
  --field-d: 210, 230, 255;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}
.lab-link > span {
  position: relative;
  z-index: 1;
  opacity: 0.5;
  transition: opacity 200ms cubic-bezier(0.65, 0, 0.35, 1);
}
.lab-link::after {
  content: '';
  position: absolute;
  inset: -12px;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background-size:
    8% 30%,
    10% 25%,
    8% 30%,
    10% 25%;
  background-repeat: no-repeat;
  transition:
    opacity 1400ms ease-out,
    background-size 1800ms ease-out;
  animation: notwork-color-drift 4s ease-in-out infinite alternate;
}
.notwork-link::after,
.lab-link::after {
  background-image:
    radial-gradient(ellipse, rgba(var(--field-a), 0.95), transparent 65%),
    radial-gradient(ellipse, rgba(var(--field-b), 0.9), transparent 65%),
    radial-gradient(ellipse, rgba(var(--field-c), 0.95), transparent 65%),
    radial-gradient(ellipse, rgba(var(--field-d), 0.9), transparent 65%);
  filter: blur(14px);
  mix-blend-mode: normal;
}
@media (hover: hover) {
  .lab-link:hover {
    opacity: 1;
  }
  .lab-link:hover::after {
    opacity: 0.8;
    background-size:
      75% 240%,
      80% 260%,
      75% 240%,
      70% 220%;
  }
  .lab-link:hover > span {
    opacity: 1;
  }
}
.lab-link:focus-visible::after,
.lab-link.is-selected::after {
  opacity: 0.8;
  background-size:
    75% 240%,
    80% 260%,
    75% 240%,
    70% 220%;
}
.lab-link:focus-visible > span,
.lab-link.is-selected > span {
  opacity: 1;
}
/* One composited light-and-color layer; no independent hover backplate. */
.notwork-page :is(.notwork-link, .lab-link) {
  transition: none;
}
.notwork-page :is(.notwork-link, .lab-link) span {
  transition: none;
}
.notwork-page :is(.notwork-link, .lab-link) > span {
  color: inherit;
  mix-blend-mode: normal;
}
.notwork-page :is(.notwork-link, .lab-link):is(.is-selected, :focus-visible) {
  color: #1c1c1e;
}
@media (hover: hover) {
  .notwork-page :is(.notwork-link, .lab-link):hover {
    color: #1c1c1e;
  }
}
.notwork-page :is(.notwork-link, .lab-link)::before {
  transition: none;
}
.notwork-page :is(.notwork-link, .lab-link)::after {
  background-color: rgba(247, 247, 247, 0.85);
  transition: none;
}
.notwork-page
  :is(.notwork-link, .lab-link):is(.is-selected, :focus-visible)::after {
  opacity: 1;
  transition:
    opacity 1400ms ease-out,
    background-size 1800ms ease-out;
}
@media (hover: hover) {
  .notwork-page :is(.notwork-link, .lab-link):hover::after {
    opacity: 1;
    transition:
      opacity 1400ms ease-out,
      background-size 1800ms ease-out;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lab-link::after {
    animation: none;
    transition: none;
  }
  .lab-link > span {
    transition: none;
  }
  .notwork-page :is(.notwork-link, .lab-link)::after {
    animation: none;
    transition: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .notwork-page :is(.notwork-link, .lab-link)::after {
    background-color: #f7f7f7;
  }
}

/* Hidden color fields do not need continuous animation. */
:is(.notwork-link, .lab-link)::after {
  animation-play-state: paused;
}
:is(.notwork-link, .lab-link):is(.is-selected, :focus-visible)::after {
  animation-play-state: running;
}
@media (hover: hover) {
  :is(.notwork-link, .lab-link):hover::after {
    animation-play-state: running;
  }
}
html.page-hidden :is(.notwork-link, .lab-link)::after {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .notwork-page
    :is(.notwork-link, .lab-link):is(
      .is-selected,
      :focus-visible,
      :hover
    )::after {
    animation: none;
    transition: none;
  }
}

/* Shared case-study view. */
.card[data-case-study] { cursor:pointer; }
.card:focus-visible { outline:1px solid #1c1c1e; outline-offset:4px; }
.case-open > .header { visibility:hidden; }
.case-open > .gallery { visibility:hidden; }
.case-study { position:fixed; inset:0; width:100%; max-width:none; height:100%; height:100dvh; max-height:none; margin:0; padding:0; border:0; background:#fcfcfc; color:#1c1c1e; font:400 12px/1.3 'ABC Areal',sans-serif; overflow:hidden; }
.case-study::backdrop { background:transparent; }

.case-nav { position:absolute; inset:12px 12px auto; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; z-index:2; pointer-events:none; }
.case-nav button { font:inherit; color:inherit; border:0; cursor:pointer; }
.case-info { width:min(413px,calc(100% - 45px)); border-radius:8px; background:rgba(247,247,247,.7); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); pointer-events:auto; overflow:hidden; }
.case-info-toggle { width:100%; height:33px; text-align:left; padding:0 12px; background:none; display:flex; align-items:center; justify-content:space-between; }
.case-info-reveal { display:grid; grid-template-rows:0fr; transition:grid-template-rows 625ms cubic-bezier(.65,0,.35,1); }
.case-info-toggle[aria-expanded=true] + .case-info-reveal { grid-template-rows:1fr; }
.case-info-reveal > div { overflow:hidden; }
.case-copy { padding:0 12px 12px; display:flex; flex-direction:column; gap:20px; }
.case-info-symbol { position:relative; display:block; width:14px; height:14px; flex:none; opacity:.5; }
.case-info-symbol::before,.case-info-symbol::after { content:""; position:absolute; left:0; top:6.5px; width:14px; height:1px; background:currentColor; border-radius:1px; }
.case-info-symbol::after { transform:rotate(90deg); transition:transform 400ms cubic-bezier(.65,0,.35,1); }
.case-info-toggle[aria-expanded=true] .case-info-symbol::after { transform:rotate(0deg); }
.case-copy p { opacity:.5; }
.case-copy > p:first-child { text-wrap:balance; }
.case-copy > * { text-box-trim:trim-both; text-box-edge:cap alphabetic; }
.case-close { padding:0; width:33px; height:33px; background:rgba(247,247,247,.7); display:grid; place-items:center; flex:none; pointer-events:auto; transition:opacity 200ms cubic-bezier(.65,0,.35,1); }
.case-close-symbol { position:relative; display:block; width:14px; height:14px; opacity:.5; }
.case-close-symbol::before,.case-close-symbol::after { content:""; position:absolute; top:6.5px; left:0; width:14px; height:1px; background:currentColor; border-radius:1px; transform:rotate(45deg); }
.case-close-symbol::after { transform:rotate(-45deg); }
.case-close { border-radius:50%; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.case-close:hover { opacity:1; }
.case-nav button:focus-visible { outline:1px solid #1c1c1e; outline-offset:-2px; }
.case-rail { position:relative; display:flex; gap:24px; width:100%; height:100%; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; touch-action:pan-x pinch-zoom; overscroll-behavior:contain; outline:none; cursor:grab; }
.case-rail::-webkit-scrollbar { display:none; }
.case-rail.is-dragging { cursor:grabbing; }
.case-slide { margin:0; height:100%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.case-slide > img,.case-slide > video { display:block; flex:none; border-radius:8px; object-fit:contain; user-select:none; }
.case-copy { max-height:calc(100dvh - 90px); overflow-y:auto; }
@media(prefers-reduced-motion:reduce) { .case-info-reveal,.case-close,.case-info-symbol::after { transition:none; } }

/* Shared neutral control feedback. */
.case-close-symbol { transition:opacity 200ms cubic-bezier(.65,0,.35,1); }
.case-close:is(:hover,:focus-visible) .case-close-symbol { opacity:1; }

.case-info-toggle:is(:hover,:focus-visible) .case-info-symbol { opacity:1; }
.case-info-symbol { transition:opacity 200ms cubic-bezier(.65,0,.35,1); }
@media(prefers-reduced-motion:reduce) { .case-info-symbol { transition:none; } }