@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;
  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;
}
.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: 146, 212, 209;
  --field-c: 143, 204, 242;
  --field-d: 249, 220, 146;
}
.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;
  }
}