/**
 * ==========================================================================
 * SOY YO — Matthias Krause
 * ==========================================================================
 *
 * File:        soyyo.css
 * Phase:       1 — Foundation
 * Area:        Styles / Application
 *
 * Purpose:
 * Defines the tablet-and-desktop application layout and visual presentation for
 * identity, clock, theme menu, theme stage, language selection and intro
 * animation.
 *
 * Dependencies:
 * - reset.css
 * - variables.css
 * - HTML structure supplied by index.html
 * - Component classes generated by the JavaScript modules
 *
 * ==========================================================================
 */

/* ==========================================================================
   Document
   ========================================================================== */

html {
  min-width: var(--desktop-min-width);
  min-height: var(--desktop-min-height);
  background-color: var(--color-background);
}

body {
  min-width: var(--desktop-min-width);
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;

  color: var(--color-foreground);
  background-color: var(--color-background);

  font-family: var(--font-interface);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);

  -webkit-tap-highlight-color: transparent;
}

button,
a,
input,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}


/* ==========================================================================
   Application
   ========================================================================== */

.soyyo {
  position: relative;
  isolation: isolate;

  width: 100%;
  height: 100%;
  min-width: var(--desktop-min-width);
  min-height: 0;

  overflow: hidden;
  background-color: var(--color-background);

  -webkit-user-select: none;
  user-select: none;
}

.soyyo .selectable-content {
  -webkit-user-select: text;
  user-select: text;
}


/* ==========================================================================
   Initial site loader
   ========================================================================== */

.site-loader {
  --site-loader-scale: 0;

  position: fixed;
  inset: 0;
  z-index: 10020;

  display: grid;
  grid-template-columns: auto auto;
  place-content: center;
  align-items: center;
  gap: 0.9rem;

  color: var(--color-foreground);
  background: var(--color-background);
  visibility: visible;
  opacity: 1;
  pointer-events: auto;

  transition:
    visibility 0s linear 700ms,
    opacity 700ms var(--ease-standard);
}

.site-loader.is-complete {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.site-loader__mark {
  position: relative;
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  overflow: hidden;
  border: 1px solid currentColor;
}

.site-loader__fill {
  position: absolute;
  inset: 0;
  background: currentColor;
  transform: scaleY(var(--site-loader-scale));
  transform-origin: center bottom;
  transition: transform 420ms var(--ease-expressive);
}

.site-loader__value {
  min-width: 2.1rem;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-light);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: var(--letter-spacing-wider);
}

@media (prefers-reduced-motion: reduce) {
  .site-loader,
  .site-loader__fill {
    transition-duration: 1ms;
  }
}


/* ==========================================================================
   Inactivity gimmick — 01:19 / 24
   ========================================================================== */

.inactivity-gimmick {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-identity) + 10);

  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.4rem;

  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background: rgb(240 238 232 / 96%);
  backdrop-filter: blur(4px);

  transition:
    visibility 0s linear 900ms,
    opacity 900ms var(--ease-standard);
}

.inactivity-gimmick.is-active {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.inactivity-gimmick.is-closing {
  visibility: visible;
  opacity: 0;
  transition:
    visibility 0s linear 700ms,
    opacity 700ms var(--ease-standard);
}

.inactivity-gimmick__square {
  --gimmick-progress: 0;

  position: relative;
  width: clamp(3rem, 4vw, 4.25rem);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--color-foreground);
}

.inactivity-gimmick__square::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-foreground);
  transform: scaleY(var(--gimmick-progress));
  transform-origin: center bottom;
  transition: transform 900ms linear;
}

.inactivity-gimmick__count {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: var(--font-weight-light);
  line-height: 1;
  letter-spacing: var(--letter-spacing-widest);
  opacity: 0.45;
}

.inactivity-gimmick__message {
  width: min(54rem, 78vw);
  margin-top: 0.75rem;

  font-family: var(--font-interface);
  font-size: clamp(0.68rem, 0.82vw, 0.88rem);
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
  letter-spacing: var(--letter-spacing-wide);
  text-align: center;
  white-space: pre-line;
}

@media (prefers-reduced-motion: reduce) {
  .inactivity-gimmick,
  .inactivity-gimmick__square::before {
    transition-duration: 1ms;
  }
}


/* ==========================================================================
   Identity
   z-index: 9999
   ========================================================================== */

.identity {
  position: fixed;
  top: var(--page-padding-vertical);
  left: var(--page-padding-horizontal);
  z-index: var(--z-identity);

  display: block;
  pointer-events: none;
}

.identity__title {
  width: clamp(9rem, 14vw, 14rem);
  color: var(--color-foreground);
  line-height: 0;
}

.identity__wordmark {
  display: block;

  width: 100%;
  aspect-ratio: 8264 / 1500;

  background-color: currentColor;

  -webkit-mask-image:
    url("../assets/images/identity/source/soyyo-square-lockup-master.svg");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;

  mask-image:
    url("../assets/images/identity/source/soyyo-square-lockup-master.svg");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.identity__name {
  margin-top: 0.875rem;
  margin-left: 0.25rem;

  font-family: var(--font-interface);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
}


/* ==========================================================================
   Clock
   z-index: 9998
   ========================================================================== */

.clock {
  position: fixed;
  top: var(--page-padding-vertical);
  right: var(--page-padding-horizontal);
  z-index: var(--z-clock);

  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.clock__face {
  position: relative;

  width: var(--clock-size);
  height: var(--clock-size);

  flex: 0 0 auto;

  border: 1px solid var(--color-foreground);
  border-radius: var(--clock-border-radius);
}

.clock__inner {
  position: absolute;
  inset: 0.4375rem;

  border: var(--border-thin);
  border-radius: var(--clock-border-radius);
}

.clock__mark {
  position: absolute;
  top: 0.1875rem;
  left: calc(50% - 0.03125rem);

  width: 0.0625rem;
  height: 0.3125rem;

  background-color: var(--color-foreground);
  transform-origin:
    0.03125rem
    calc((var(--clock-size) / 2) - 0.1875rem);
}

.clock__hand {
  position: absolute;
  bottom: 50%;
  left: 50%;

  width: 0.0625rem;

  background-color: var(--color-foreground);
  transform-origin: center bottom;
}

.clock__hand--hour {
  width: 0.125rem;
  height: 1.4375rem;
}

.clock__hand--minute {
  height: 2rem;
}

.clock__hand--second {
  height: 2.25rem;
  background-color: var(--color-accent);
}

.clock__center {
  position: absolute;
  top: calc(50% - 0.15625rem);
  left: calc(50% - 0.15625rem);

  width: 0.3125rem;
  height: 0.3125rem;

  border-radius: 50%;
  background-color: var(--color-accent);
}


/* ==========================================================================
   Central time reveal
   ========================================================================== */

.time-reveal {
  --reveal-x: 50vw;
  --reveal-y: 50vh;
  --reveal-radius: clamp(7rem, 13vw, 12rem);

  position: fixed;
  inset: 0;
  z-index: calc(var(--z-menu) - 1);

  display: grid;
  place-items: center;

  overflow: hidden;
  pointer-events: none;

  opacity: 0;

  -webkit-mask-image:
    radial-gradient(
      circle var(--reveal-radius)
      at var(--reveal-x) var(--reveal-y),
      #000 0%,
      #000 42%,
      rgb(0 0 0 / 82%) 60%,
      rgb(0 0 0 / 28%) 82%,
      transparent 100%
    );

  mask-image:
    radial-gradient(
      circle var(--reveal-radius)
      at var(--reveal-x) var(--reveal-y),
      #000 0%,
      #000 42%,
      rgb(0 0 0 / 82%) 60%,
      rgb(0 0 0 / 28%) 82%,
      transparent 100%
    );

  transition:
    opacity 480ms var(--ease-standard);
}

.time-reveal::before {
  content: "";

  position: absolute;
  inset: 0;

  opacity: 0.16;

  background-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgb(27 27 25 / 18%) 50%,
      transparent 100%
    ),
    linear-gradient(
      0deg,
      transparent 0%,
      rgb(255 255 255 / 20%) 50%,
      transparent 100%
    );

  background-size:
    0.75rem 0.75rem,
    0.75rem 0.75rem;

  mix-blend-mode: multiply;
}

.time-reveal[data-reveal-state="active"] {
  opacity: 1;
}

.time-reveal[data-reveal-state="inactive"] {
  opacity: 0;
}

.time-reveal[data-reveal-state="static"] {
  opacity: 0.16;
  -webkit-mask-image: none;
  mask-image: none;
}

.time-reveal__content {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;

  transform: translateY(-1vh);
  text-align: center;
}

.time-reveal__digital {
  display: block;

  color: var(--color-foreground);
  opacity: 0.3;

  font-family: var(--font-mono);
  font-size: clamp(5rem, 14vw, 13rem);
  font-weight: var(--font-weight-light);
  font-variant-numeric: tabular-nums;
  line-height: 0.82;
  letter-spacing: -0.075em;
  white-space: nowrap;
}

.time-reveal__motto {
  margin-top: clamp(1.25rem, 2.5vw, 2.5rem);

  color: var(--color-foreground);
  opacity: 0.3;

  font-family: var(--font-interface);
  font-size: clamp(1.25rem, 2vw, 2rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--letter-spacing-wider);
}

@media (pointer: coarse) {
  .time-reveal {
    --reveal-radius: clamp(6rem, 24vw, 10rem);
  }
}


/* ==========================================================================
   Theme menu
   ========================================================================== */

.theme-menu {
  position: absolute;
  inset: 0;
  z-index: var(--z-menu);

  display: grid;
  grid-template-columns: repeat(var(--theme-count), minmax(0, 1fr));
  align-items: end;

  padding:
    0
    var(--page-padding-horizontal)
    calc(var(--page-padding-vertical) + 45px)
    14.375rem;
}

/* Narrower entry columns, anchored to the existing right edge. */
@media (min-width: 48rem) {
  .theme-menu {
    grid-template-columns: repeat(var(--theme-count), minmax(0, calc(85% / var(--theme-count))));
    justify-content: end;
  }
}

.theme-menu__item {
  position: relative;
  isolation: isolate;

  display: flex;
  height: var(--theme-menu-height);
  min-width: 0;
  padding: 0 1.125rem 0.125rem;

  align-items: flex-end;

  border-left: var(--border-thin);
  overflow: hidden;
  text-align: left;
}

.theme-menu__item::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: -1;

  background-color: rgb(27 27 25 / 4%);
  transform: scaleY(0);
  transform-origin: center bottom;

  transition:
    transform 700ms var(--ease-expressive),
    background-color var(--duration-normal) var(--ease-standard);
}

.theme-menu__item::after {
  content: "";

  position: absolute;
  top: 0;
  right: 0;
  left: 0;

  height: 1px;

  background-color: currentColor;
  opacity: 0;
  transform: scaleX(0.35);

  transition:
    opacity var(--duration-normal) var(--ease-standard),
    transform 700ms var(--ease-expressive);
}

.theme-menu__item:last-child {
  border-right: var(--border-thin);
}

.theme-menu__index {
  position: absolute;
  top: 0;
  left: 1.125rem;

  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-wider);

  opacity: 0.5;
  transform: translateY(0);

  transition:
    opacity var(--duration-normal) var(--ease-standard),
    transform 600ms var(--ease-expressive);
}

.theme-menu__label {
  display: block;

  font-family: var(--font-interface);
  font-size: var(--font-size-navigation);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  transform: translateY(0);

  transition:
    opacity var(--duration-normal) var(--ease-standard),
    transform 700ms var(--ease-expressive);
}

.theme-menu__item:hover::before,
.theme-menu__item:focus-visible::before,
.theme-menu__item.is-active::before {
  transform: scaleY(1);
}

.theme-menu__item:hover::after,
.theme-menu__item:focus-visible::after,
.theme-menu__item.is-active::after {
  opacity: 0.42;
  transform: scaleX(1);
}

.theme-menu__item:hover .theme-menu__index,
.theme-menu__item:focus-visible .theme-menu__index,
.theme-menu__item.is-active .theme-menu__index {
  opacity: 1;
  transform: translateY(0.5rem);
}

.theme-menu__item:hover .theme-menu__label,
.theme-menu__item:focus-visible .theme-menu__label,
.theme-menu__item.is-active .theme-menu__label {
  transform: translateY(-0.75rem);
}

.theme-menu:has(.theme-menu__item:hover)
  .theme-menu__item:not(:hover),
.theme-menu:has(.theme-menu__item:focus-visible)
  .theme-menu__item:not(:focus-visible) {
  opacity: 0.38;
}

.theme-menu__item:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: -0.25rem;
}

/* Keep hover hit testing on the stationary button, not animated decoration. */
.soyyo .theme-menu button:not(:disabled),
.soyyo .chef-view__navigation button:not(:disabled),
.soyyo .artist-view__navigation button:not(:disabled),
.soyyo .world-atlas button:not(:disabled),
.soyyo .bottom-bar button:not(:disabled) {
  cursor: pointer;
}

.theme-menu__item::before,
.theme-menu__item::after,
.theme-menu__item > span,
.chef-view__navigation-button > span,
.chef-view__recipe-category > span,
.artist-view__navigation-button > span,
.world-atlas__country > span,
.world-atlas__place-button > span {
  pointer-events: none;
  cursor: inherit;
}

@media (pointer: coarse) {
  .theme-menu__item:hover:not(.is-active)::before,
  .theme-menu__item:hover:not(.is-active)::after {
    transform: none;
  }

  .theme-menu__item:hover:not(.is-active)::after {
    opacity: 0;
  }

  .theme-menu__item:hover:not(.is-active) .theme-menu__index,
  .theme-menu__item:hover:not(.is-active) .theme-menu__label {
    transform: none;
  }

  .theme-menu:has(.theme-menu__item:hover)
    .theme-menu__item:not(:hover) {
    opacity: 1;
  }
}


/* ==========================================================================
   Theme stage
   ========================================================================== */

.theme-stage {
  position: fixed;
  inset: 0;
  z-index: var(--z-stage);

  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;

  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  background-color: var(--color-background);

  transition:
    visibility 0s linear 800ms,
    opacity 800ms var(--ease-standard);
}

.theme-stage[data-theme-state="open"] {
  z-index: calc(var(--z-menu) + 1);
  visibility: visible;

  transition-delay: 0s;
}

.theme-stage.is-theme-visible {
  opacity: 1;
  pointer-events: auto;
}

.theme-stage__content {
  position: absolute;
  inset: 0;
}

.theme-stage__close {
  position: absolute;
  top: var(--page-padding-vertical);
  right: calc(
    var(--page-padding-horizontal) +
    var(--clock-size) +
    var(--space-7)
  );
  z-index: 20;

  width: 2rem;
  height: 2rem;

  opacity: 0;
  transform: rotate(-20deg);

  transition:
    opacity var(--duration-normal) var(--ease-standard),
    transform 900ms var(--ease-expressive);
}

.theme-stage.is-theme-visible .theme-stage__close {
  opacity: 0.55;
  transform: rotate(0deg);
}

.theme-stage__close:hover,
.theme-stage__close:focus-visible {
  opacity: 1;
}

.theme-stage__close:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.25rem;
}

.theme-stage__close span,
.theme-stage__close span::before {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 1.5rem;
  height: 1px;

  background-color: currentColor;
}

.theme-stage__close span {
  transform: translate(-50%, -50%) rotate(45deg);
}

.theme-stage__close span::before {
  content: "";
  transform: translate(-50%, -50%) rotate(90deg);
}


/*
 * Shared theme view
 */

.theme-view {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
}


/*
 * WORLD — continent chapters study 0.2
 */

.world-view {
  overflow: hidden;
  color: var(--color-foreground);
  background: var(--color-background);
}

.world-view__reveal {
  --reveal-x: 50vw;
  --reveal-y: 50vh;
  --world-atlas-radius: clamp(10rem, 21vw, 19rem);
  --world-atlas-radius-y: clamp(7.2rem, 15vw, 13.7rem);
  --world-memory-radius: clamp(4.5rem, 8.5vw, 7.5rem);

  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.world-view__reveal-atlas,
.world-view__reveal-memory {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms var(--ease-standard);
}

.world-view__reveal-atlas {
  background-image:
    repeating-radial-gradient(
      ellipse at 42% 54%,
      transparent 0 2.75rem,
      rgb(27 27 25 / 7%) 2.8rem 2.86rem,
      transparent 2.92rem 5.4rem
    ),
    linear-gradient(
      90deg,
      transparent calc(50% - 0.5px),
      rgb(27 27 25 / 7%) 50%,
      transparent calc(50% + 0.5px)
    ),
    linear-gradient(
      transparent calc(50% - 0.5px),
      rgb(27 27 25 / 7%) 50%,
      transparent calc(50% + 0.5px)
    );
  background-position: center, center, center;
  background-repeat: no-repeat;
  background-size: 100% 100%, 5rem 100%, 100% 5rem;

  -webkit-mask-image: radial-gradient(
    ellipse var(--world-atlas-radius) var(--world-atlas-radius-y)
      at var(--reveal-x) var(--reveal-y),
    #000 0%,
    rgb(0 0 0 / 92%) 45%,
    rgb(0 0 0 / 48%) 70%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse var(--world-atlas-radius) var(--world-atlas-radius-y)
      at var(--reveal-x) var(--reveal-y),
    #000 0%,
    rgb(0 0 0 / 92%) 45%,
    rgb(0 0 0 / 48%) 70%,
    transparent 100%
  );
}

.world-view__reveal-coordinates {
  position: absolute;
  top: calc(var(--reveal-y) + 4.75rem);
  left: calc(var(--reveal-x) - 10rem);
  width: 20rem;
  font-family: var(--font-mono);
  font-size: 0.48rem;
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-wider);
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 500ms var(--ease-standard);
}

.world-view__reveal[data-reveal-state="active"]
  .world-view__reveal-coordinates {
  opacity: 0.58;
}

.world-view__reveal[data-reveal-state="static"]
  .world-view__reveal-coordinates {
  opacity: 0.28;
}

.world-view__reveal-memory {
  background:
    linear-gradient(rgb(240 238 232 / 68%), rgb(240 238 232 / 68%)),
    url("../assets/images/world/world-map-outline.svg") center / min(78vw, 76rem) auto no-repeat;
  filter: grayscale(1) contrast(1.28);
  mix-blend-mode: multiply;

  -webkit-mask-image: radial-gradient(
    circle var(--world-memory-radius)
      at var(--reveal-x) var(--reveal-y),
    #000 0%,
    #000 42%,
    rgb(0 0 0 / 72%) 68%,
    transparent 100%
  );
  mask-image: radial-gradient(
    circle var(--world-memory-radius)
      at var(--reveal-x) var(--reveal-y),
    #000 0%,
    #000 42%,
    rgb(0 0 0 / 72%) 68%,
    transparent 100%
  );
}

.world-view__reveal[data-reveal-state="active"]
  .world-view__reveal-atlas {
  opacity: 0.22;
}

.world-view__reveal[data-reveal-state="active"]
  .world-view__reveal-memory {
  opacity: 0.42;
}

.world-view__reveal[data-reveal-state="static"]
  .world-view__reveal-atlas {
  opacity: 0.08;
}

.world-view__reveal[data-reveal-state="static"]
  .world-view__reveal-memory {
  opacity: 0.14;
}

.world-view__introduction {
  position: absolute;
  top: calc(21vh + 30px);
  left: calc(var(--page-padding-horizontal) + 9.375rem - 50px);
  z-index: 3;

  display: flex;
  align-items: baseline;
  gap: var(--space-3);

  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 450ms var(--ease-standard),
    transform 650ms var(--ease-expressive);
}

.world-view__kicker {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-wider);
  opacity: 0;
  transform: translateY(0.75rem);
  transition:
    opacity 600ms var(--ease-standard) 180ms,
    transform 800ms var(--ease-expressive) 180ms;
}

.world-view__title {
  font-family: var(--font-interface);
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  letter-spacing: var(--letter-spacing-wide);
  opacity: 0;
  transform: translateY(1rem);
  transition:
    opacity 700ms var(--ease-standard) 260ms,
    transform 900ms var(--ease-expressive) 260ms;
}

.world-view__viewport {
  position: absolute;
  top: 34vh;
  right: var(--page-padding-horizontal);
  bottom: 10rem;
  left: var(--page-padding-horizontal);
  z-index: 2;

  overflow: hidden;
  opacity: 0;
  transform: translateY(1rem);

  transition:
    opacity 800ms var(--ease-standard) 260ms,
    transform 1100ms var(--ease-expressive) 260ms;
}

.world-view__chapter-menu {
  display: none;
}

.world-view__track {
  --world-offset: 0px;

  position: absolute;
  top: 50%;
  left: 0;

  display: grid;
  grid-template-columns: 55vw repeat(4, 90vw);
  width: max-content;
  padding-right: 50vw;
  transform: translate3d(var(--world-offset), -50%, 0);
  transition: transform 120ms linear;
  will-change: transform;
}

.world-view__track::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--color-line);
}

.world-view__chapter {
  position: relative;
  min-width: 0;
}

.world-view__chapter:first-child {
  transform: translateX(-150px);
}

.world-view__chapter-heading {
  position: relative;
  display: grid;
  grid-template-rows: 3.25rem 1rem 3.25rem;
  width: 100%;
  align-items: center;
  justify-items: center;
  color: inherit;
  opacity: 0.3;
  transition:
    opacity var(--duration-normal) var(--ease-standard);
}

.world-view__chapter.is-active .world-view__chapter-heading {
  opacity: 1;
}

.world-view__chapter-label {
  align-self: end;
  max-width: 90%;
  overflow: hidden;

  font-family: var(--font-interface);
  font-size: clamp(0.75rem, 1.15vw, 1.125rem);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  letter-spacing: var(--letter-spacing-wide);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.world-view__chapter-marker {
  position: relative;
  z-index: 1;
  width: 0.55rem;
  height: 0.55rem;
  border: 1px solid currentColor;
  background: var(--color-background);
  transition:
    background-color var(--duration-normal) var(--ease-standard),
    transform 600ms var(--ease-expressive);
}

.world-view__chapter.is-active .world-view__chapter-marker {
  background: var(--color-foreground);
  transform: scale(1.25);
}

.world-view__chapter-number {
  align-self: start;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-light);
  line-height: 1;
  letter-spacing: var(--letter-spacing-wider);
}

.world-view__chapter-status {
  position: absolute;
  top: calc(50% + 2.1rem);
  font-family: var(--font-mono);
  font-size: clamp(0.62rem, 0.72vw, 0.72rem);
  font-weight: var(--font-weight-light);
  line-height: 1;
  letter-spacing: 0.18em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.3rem);
  transition:
    opacity 420ms var(--ease-standard),
    transform 600ms var(--ease-expressive);
}

.world-view__chapter.is-in-progress.is-active .world-view__chapter-status {
  opacity: 0.66;
  transform: translateY(0);
}

.world-view__locations {
  position: absolute;
  top: 50%;
  left: calc(50% + clamp(3.5rem, 5vw, 5.5rem));
  z-index: 3;

  display: grid;
  gap: 0;
  min-width: 11.5rem;
  padding: 0.375rem;

  color: var(--color-foreground);
  background: rgb(240 238 232 / 96%);
  border: 1px solid var(--color-line);

  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(0.75rem);

  transition:
    visibility 0s linear 500ms,
    opacity 500ms var(--ease-standard),
    transform 650ms var(--ease-expressive);
}

.world-view__chapter.is-active .world-view__locations {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
  transition-delay: 0s, 160ms, 160ms;
}

.world-view__location {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.55rem 0.65rem;
  color: inherit;
  background: transparent;

  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: var(--font-weight-light);
  line-height: 1;
  letter-spacing: var(--letter-spacing-wider);
  white-space: nowrap;

  opacity: 0;
  transition:
    opacity 450ms var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.world-view__location:hover,
.world-view__location:focus-visible {
  background: rgb(27 27 25 / 4%);
}

.world-view__location-marker {
  width: 0.42rem;
  height: 0.42rem;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  background: var(--color-background);
}

.world-view__location-label {
  padding: 0;
  background: transparent;
  opacity: 0.52;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.world-view__chapter.is-active .world-view__location {
  opacity: 1;
}

.world-view__chapter.is-active
  .world-view__location:hover
  .world-view__location-label,
.world-view__chapter.is-active
  .world-view__location:focus-visible
  .world-view__location-label {
  opacity: 1;
}

.world-view__location:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.1875rem;
}

.world-view__location.has-country-study
  .world-view__location-label {
  opacity: 0.78;
}


/*
 * WORLD / COUNTRY — vertical place study 0.1
 */

.world-country {
  position: absolute;
  top: 30vh;
  right: var(--page-padding-horizontal);
  bottom: 7.5rem;
  left: var(--page-padding-horizontal);
  z-index: 4;

  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(1rem);

  transition:
    visibility 0s linear 700ms,
    opacity 600ms var(--ease-standard),
    transform 850ms var(--ease-expressive);
}

.world-country.is-visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s, 160ms, 160ms;
}

.world-country__header {
  position: absolute;
  top: 0;
  left: calc(var(--page-padding-horizontal) + 5.5rem);
}

.world-country__hierarchy,
.world-country__period,
.world-country__content-label,
.world-country__back {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-wider);
}

.world-country__hierarchy {
  opacity: 0.38;
}

.world-country__title {
  margin-top: 0.4rem;
  font-family: var(--font-interface);
  font-size: clamp(1.5rem, 2.8vw, 3rem);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  letter-spacing: var(--letter-spacing-wide);
}

.world-country__back {
  margin-top: 1.8rem;
  font-size: clamp(0.72rem, 0.8vw, 0.9rem);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.18em;
  opacity: 0.72;
  transition:
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-normal) var(--ease-expressive);
}

.world-country__back:hover,
.world-country__back:focus-visible {
  opacity: 1;
  transform: translateX(-0.35rem);
}

.world-country__back:focus-visible,
.world-country__place-button:focus-visible,
.world-country__timeline-range:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.3rem;
}

.world-country__places {
  position: absolute;
  top: clamp(8rem, 20vh, 12rem);
  bottom: 1rem;
  left: calc(var(--page-padding-horizontal) + 5.5rem);

  display: grid;
  grid-template-rows: repeat(2, 1fr);
  min-height: 10rem;
}

.world-country__places::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  left: 0.25rem;
  width: 1px;
  background: var(--color-line);
}

.world-country__place-button {
  position: relative;
  display: flex;
  gap: 0.9rem;
  align-items: center;
  height: 100%;
  text-align: left;
}

.world-country__place-marker {
  position: relative;
  z-index: 1;
  width: 0.55rem;
  height: 0.55rem;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  background: var(--color-background);
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-normal) var(--ease-expressive);
}

.world-country__place-label {
  font-family: var(--font-interface);
  font-size: clamp(0.72rem, 1vw, 0.95rem);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-wide);
  opacity: 0.34;
  transition:
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-normal) var(--ease-expressive);
}

.world-country__places li.is-active
  .world-country__place-marker,
.world-country__place-button:hover
  .world-country__place-marker,
.world-country__place-button:focus-visible
  .world-country__place-marker {
  background: currentColor;
  transform: scale(1.25);
}

.world-country__places li.is-active
  .world-country__place-label,
.world-country__place-button:hover
  .world-country__place-label,
.world-country__place-button:focus-visible
  .world-country__place-label {
  opacity: 1;
  transform: translateX(0.25rem);
}

.world-country__content {
  position: absolute;
  top: 0;
  right: clamp(5rem, 8vw, 8rem);
  bottom: 1rem;
  left: clamp(22rem, 37vw, 34rem);
  min-width: 0;
}

.world-country__period {
  opacity: 0.42;
}

.world-country__place-title {
  margin-top: 0.6rem;
  font-family: var(--font-interface);
  font-size: clamp(1.3rem, 2.15vw, 2.45rem);
  font-weight: var(--font-weight-regular);
  line-height: 0.9;
  letter-spacing: 0.025em;
}

.world-country__external-link {
  position: absolute;
  top: 1.1rem;
  right: 0;
  display: grid;
  width: 2.6rem;
  height: 2.6rem;
  place-items: center;
  color: currentColor;
  opacity: 0.62;
  transition:
    opacity var(--duration-fast) var(--ease-standard);
}

.world-country__external-link[hidden] {
  display: none;
}

.world-country__external-link svg {
  display: block;
  width: 1.3rem;
  height: 1.3rem;
  color: var(--color-foreground);
}

.world-country__external-link-background {
  fill: transparent;
  transition: fill var(--duration-fast) var(--ease-standard);
}

.world-country__external-link-outline,
.world-country__external-link-arrow {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.world-country__external-link-arrow {
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.world-country__external-link:hover,
.world-country__external-link:focus-visible {
  opacity: 1;
}

.world-country__external-link:hover svg,
.world-country__external-link:focus-visible svg {
  color: var(--color-background);
}

.world-country__external-link:hover .world-country__external-link-background,
.world-country__external-link:focus-visible .world-country__external-link-background {
  fill: var(--color-foreground);
}

.world-country__external-link:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.35rem;
}

.world-country__content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(15rem, 0.85fr);
  grid-template-rows: auto auto;
  gap: 0 clamp(2rem, 4vw, 5rem);
  max-height: calc(100% - clamp(5rem, 10vh, 8rem));
  margin-top: clamp(1.5rem, 3.2vh, 2.75rem);
  padding-top: 1.1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgb(27 27 25 / 22%) transparent;
  border-top: var(--border-thin);
}

.world-country__content-item:first-child {
  grid-row: 1 / span 2;
  padding-right: clamp(1rem, 2vw, 2rem);
  border-right: var(--border-thin);
}

.world-country__content-item:nth-child(2) {
  padding-bottom: clamp(1.25rem, 2.8vh, 2.25rem);
  border-bottom: var(--border-thin);
}

.world-country__content-item:nth-child(3) {
  padding-top: clamp(1.25rem, 2.8vh, 2.25rem);
}

.world-country__content-grid::-webkit-scrollbar {
  width: 1px;
}

.world-country__content-grid::-webkit-scrollbar-thumb {
  background: rgb(27 27 25 / 22%);
}

.world-country__content-label {
  opacity: 0.58;
}

.world-country__content-text {
  margin-top: 0.8rem;
  font-family: var(--font-interface);
  font-size: clamp(0.62rem, 0.72vw, 0.75rem);
  line-height: 1.58;
  letter-spacing: 0.025em;
  opacity: 0.76;
}

.world-country__timeline {
  position: absolute;
  top: 50%;
  right: -4.75rem;
  width: 11rem;
  transform: rotate(90deg);
}

.world-country__timeline-range {
  --country-progress: 0%;

  width: 100%;
  height: 2.75rem;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: ns-resize;
}

.world-country__timeline-range::-webkit-slider-runnable-track {
  height: 1px;
  background:
    linear-gradient(
      to right,
      currentColor 0 var(--country-progress),
      var(--color-line) var(--country-progress) 100%
    );
}

.world-country__timeline-range::-webkit-slider-thumb {
  width: 0.625rem;
  height: 0.625rem;
  margin-top: -0.28125rem;
  appearance: none;
  border: 0;
  border-radius: 0;
  background: currentColor;
}

.world-country__timeline-range::-moz-range-track {
  height: 1px;
  background: var(--color-line);
}

.world-country__timeline-range::-moz-range-progress {
  height: 1px;
  background: currentColor;
}

.world-country__timeline-range::-moz-range-thumb {
  width: 0.625rem;
  height: 0.625rem;
  border: 0;
  border-radius: 0;
  background: currentColor;
}

.world-view[data-country-state="open"]
  .world-view__viewport {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.75rem);
  transition-delay: 0s;
}

.world-view[data-country-state="open"]
  .world-view__timeline {
  opacity: 0.16;
  pointer-events: none;
}

.world-view__timeline {
  position: absolute;
  right: var(--page-padding-horizontal);
  bottom: 4.4rem;
  left: var(--page-padding-horizontal);
  z-index: 2;
  pointer-events: auto;
}

.world-view__timeline-labels {
  position: absolute;
  top: 2.15rem;
  right: 0;
  bottom: auto;
  left: 0;
  height: 1rem;
  pointer-events: none;
}

.world-view__timeline-label {
  position: absolute;
  left: var(--timeline-label-position);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: var(--font-weight-regular);
  line-height: 1;
  letter-spacing: var(--letter-spacing-wider);
  white-space: nowrap;
  opacity: 0.32;
  transform: translateX(-50%);
  transition: opacity var(--duration-normal) var(--ease-standard);
}

.world-view__timeline-label:first-child {
  transform: none;
}

.world-view__timeline-label:last-child {
  transform: translateX(-100%);
}

.world-view__timeline-label.is-active {
  opacity: 0.68;
}

.world-view__timeline-range {
  --timeline-progress: 0%;

  width: 100%;
  height: 2.75rem;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
}

.world-view__timeline-range::-webkit-slider-runnable-track {
  height: 1px;
  background:
    linear-gradient(
      to right,
      currentColor 0 var(--timeline-progress),
      var(--color-line) var(--timeline-progress) 100%
    );
}

.world-view__timeline-range::-webkit-slider-thumb {
  width: 0.625rem;
  height: 0.625rem;
  margin-top: -0.28125rem;
  appearance: none;
  border: 0;
  border-radius: 0;
  background: currentColor;
}

.world-view__timeline-range::-moz-range-track {
  height: 1px;
  background: var(--color-line);
}

.world-view__timeline-range::-moz-range-progress {
  height: 1px;
  background: currentColor;
}

.world-view__timeline-range::-moz-range-thumb {
  width: 0.625rem;
  height: 0.625rem;
  border: 0;
  border-radius: 0;
  background: currentColor;
}

.world-view__timeline-range:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.375rem;
}

html[data-active-theme="world"] .theme-stage__close,
html.is-theme-closing[data-closing-theme="world"] .theme-stage__close {
  top: auto;
  right: auto;
  bottom: max(1.75rem, calc(env(safe-area-inset-bottom) + 0.75rem));
  left: calc(50% - 1rem);
  transform: rotate(0deg);
}

html[data-active-theme="world"] .theme-stage__close:hover,
html[data-active-theme="world"] .theme-stage__close:focus-visible {
  transform: rotate(90deg);
}

.world-view__statement {
  position: absolute;
  right: var(--page-padding-horizontal);
  bottom: 2.25rem;
  z-index: 2;

  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-wider);
  opacity: 0;
  transform: translateY(0.75rem);
  transition:
    opacity 700ms var(--ease-standard) 520ms,
    transform 900ms var(--ease-expressive) 520ms;
}

.theme-stage.is-theme-visible .world-view__kicker,
.theme-stage.is-theme-visible .world-view__title,
.theme-stage.is-theme-visible .world-view__statement,
.theme-stage.is-theme-visible .world-view__viewport {
  opacity: 1;
  transform: translateY(0);
}

.theme-stage.is-theme-visible
  .world-view[data-country-state="open"]
  .world-view__viewport {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.75rem);
  transition-delay: 0s;
}

.theme-stage.is-theme-visible
  .world-view[data-country-state="open"]
  .world-view__introduction {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.75rem);
}


/*
 * ARTIST — four-chapter navigation foundation
 */

.artist-view {
  position: relative;
  overflow: hidden;
  color: var(--color-foreground);
  background: var(--color-background);
}

.artist-view__ink {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 1;
  pointer-events: none;
  transition: opacity 700ms var(--ease-standard);
}

.artist-view__ink.is-quiet {
  opacity: 0;
}

.artist-view__blob {
  filter: saturate(0) contrast(0.92);
}

.artist-view__introduction {
  position: absolute;
  top: calc(21vh + 30px);
  left: calc(var(--page-padding-horizontal) + 9.375rem - 50px);
  z-index: 2;

  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.artist-view__kicker,
.artist-view__navigation-number {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-wider);
}

.artist-view__kicker {
  opacity: 0;
  transform: translateY(0.75rem);
  transition:
    opacity 600ms var(--ease-standard) 180ms,
    transform 800ms var(--ease-expressive) 180ms;
}

.artist-view__title {
  font-family: var(--font-interface);
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  letter-spacing: var(--letter-spacing-wide);

  opacity: 0;
  transform: translateY(1rem);
  transition:
    opacity 700ms var(--ease-standard) 260ms,
    transform 900ms var(--ease-expressive) 260ms;
}

.artist-view__navigation {
  position: absolute;
  top: calc(31vh + 30px);
  left: calc(var(--page-padding-horizontal) + 9.375rem - 50px);
  z-index: 2;

  width: clamp(13.5rem, 20vw, 18.5rem);
  opacity: 0;
  transform: translateY(1rem);
  transition:
    opacity 650ms var(--ease-standard) 380ms,
    transform 900ms var(--ease-expressive) 380ms;
}

.artist-view__navigation-item {
  border-top: var(--border-thin);
}

.artist-view__navigation-item:last-child {
  border-bottom: var(--border-thin);
}

.artist-view__navigation-button {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  align-items: center;
  width: 100%;
  padding: 0.95rem 0;
  text-align: left;
  background: var(--color-background);
}

.artist-view__navigation-number {
  opacity: 0.4;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.artist-view__navigation-label {
  font-family: var(--font-interface);
  font-size: clamp(0.6875rem, 0.9vw, 0.875rem);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-wide);
  transform: translateX(0);
  transition:
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-normal) var(--ease-expressive);
}

.artist-view__navigation-button:hover
  .artist-view__navigation-label,
.artist-view__navigation-button:focus-visible
  .artist-view__navigation-label,
.artist-view__navigation-item.is-active
  .artist-view__navigation-label {
  transform: translateX(0.35rem);
}

.artist-view__navigation-item.is-active
  .artist-view__navigation-number {
  opacity: 1;
}

.artist-view__navigation-button:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.25rem;
}

.theme-stage.is-theme-visible .artist-view__kicker,
.theme-stage.is-theme-visible .artist-view__title,
.theme-stage.is-theme-visible .artist-view__navigation {
  opacity: 1;
  transform: translateY(0);
}

.artist-view.is-content-open .artist-view__introduction,
.artist-view.is-content-open .artist-view__navigation {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-1rem);
  transition-delay: 0s;
}


/*
 * ARTIST / DO IT — drawing board
 */

.artist-board {
  position: absolute;
  top: calc(var(--page-padding-vertical) + var(--clock-size) + 2rem);
  right: 30px;
  bottom: 30px;
  left: 30px;
  z-index: 20;

  overflow: hidden;
  border: var(--border-thin);
  background-color: var(--color-foreground);
  background-image:
    linear-gradient(rgb(240 238 232 / 7%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(240 238 232 / 7%) 1px, transparent 1px);
  background-size: 22px 22px;

  opacity: 1;
  transition: opacity 500ms var(--ease-standard);
}

.artist-board[hidden] {
  display: none;
}

.artist-board__canvas-stack {
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  border: var(--border-subtle);
  background: var(--color-background);
  box-shadow: 0 1rem 3rem rgb(0 0 0 / 18%);
  cursor: crosshair;
  touch-action: none;
  transform: translate(-50%, -50%);
}

.artist-board__canvas-stack[hidden] { display: none; }

.artist-board.is-pan-ready .artist-board__canvas-stack { cursor: grab; }
.artist-board.is-panning .artist-board__canvas-stack { cursor: grabbing; }

.artist-board__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.artist-board__floating-panel,
.artist-board__toolbar,
.artist-board__delete-menu {
  color: var(--color-foreground);
  border: var(--border-thin);
  background: var(--color-background);
  box-shadow: 0 0.75rem 2rem rgb(27 27 25 / 6%);
}

.artist-board__size-panel {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 6;

  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem;
  align-items: center;
  gap: 0.5rem;
  width: clamp(10rem, 16vw, 14rem);
  padding: 0.5rem 0.6rem;
}

.artist-board__size-panel input {
  width: 100%;
  height: 2.75rem;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
}

.artist-board__size-panel input::-webkit-slider-runnable-track {
  height: 1px;
  background: var(--color-line);
}

.artist-board__size-panel input::-webkit-slider-thumb {
  width: 0.6rem;
  height: 0.6rem;
  appearance: none;
  margin-top: -0.28125rem;
  border: 1px solid currentColor;
  border-radius: 0;
  background: var(--color-background);
}

.artist-board__size-panel input::-moz-range-track {
  height: 1px;
  background: var(--color-line);
}

.artist-board__size-panel input::-moz-range-thumb {
  width: 0.6rem;
  height: 0.6rem;
  border: 1px solid currentColor;
  border-radius: 0;
  background: var(--color-background);
}

.artist-board__size-panel output {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wider);
  text-align: right;
}

.artist-board__size-label {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 0.4rem;
  font-weight: var(--font-weight-light);
  line-height: 1;
  letter-spacing: var(--letter-spacing-wider);
  opacity: 0.55;
}

.artist-board__toolbar {
  position: absolute;
  top: 18px;
  right: 18px;
  bottom: auto;
  z-index: 5;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 3rem;
  height: min(36rem, calc(100% - 36px));
  padding-top: 0.8rem;
}

.artist-board__drag {
  display: grid;
  width: 1.45rem;
  height: 1rem;
  place-items: center;
  margin: 0 auto 0.55rem;
  opacity: 0.5;
  cursor: grab;
  touch-action: none;
}

.artist-board__toolbar.is-dragging .artist-board__drag {
  cursor: grabbing;
  opacity: 1;
}

.artist-board__toolbar > button,
.artist-board__layer-add {
  position: relative;
  display: grid;
  flex: 0 0 2.7rem;
  place-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  border-top: var(--border-subtle);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 0;
  text-align: center;
  vertical-align: top;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.artist-board__tool-size span {
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: var(--font-mono);
  font-size: 0.45rem;
  line-height: 1;
  letter-spacing: var(--letter-spacing-wider);
  transform: translate(-50%, -50%);
}

.artist-board__toolbar > button > .artist-board__tool-svg,
.artist-board__toolbar > button > .artist-board__history-icon,
.artist-board__layer-add > .artist-board__tool-svg,
.artist-board__layer-button > .artist-board__tool-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
}

.artist-board__tool-undo,
.artist-board__tool-redo {
  overflow: hidden;
}

.artist-board__history-icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.artist-board__tool-svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1.5;
}

.artist-board__tool-svg * {
  vector-effect: non-scaling-stroke;
}

.artist-board__drag .artist-board__tool-svg {
  width: 1.45rem;
  height: 1rem;
}

.artist-board__tool-svg--brush {
  stroke-width: 5;
}

.artist-board__tool-svg--brush path {
  stroke-linecap: butt;
}

.artist-board__tool-svg--swatch .artist-board__swatch-color {
  fill: var(--artist-active-color, currentColor);
  stroke: none;
}

.artist-board__toolbar [data-action="palette"].is-sampled {
  background: rgb(27 27 25 / 10%);
}

.artist-board__toolbar [data-action="palette"].is-sampled .artist-board__tool-svg {
  animation: artist-color-sampled 500ms var(--ease-expressive);
}

@keyframes artist-color-sampled {
  0% { transform: translate(-50%, -50%) scale(1); }
  45% { transform: translate(-50%, -50%) scale(1.22); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.artist-board__tool-confirm .artist-board__tool-svg {
  width: 1.35rem;
  height: 1.35rem;
  stroke-width: 2;
}

.artist-board__layer-preview {
  opacity: 0.45;
}

.artist-board__toolbar > button:hover,
.artist-board__toolbar > button:focus-visible,
.artist-board__toolbar > button.is-active,
.artist-board__layer-add:hover,
.artist-board__layer-button:hover,
.artist-board__layer-button.is-active {
  background: rgb(27 27 25 / 7%);
}

.artist-board__layers {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  border-top: var(--border-subtle);
}

.artist-board__layer-add {
  flex: 0 0 2.35rem;
  border-top: 0;
  border-bottom: var(--border-subtle);
}

.artist-board__layer-list {
  display: flex;
  min-height: 0;
  overflow: auto;
  flex-direction: column-reverse;
  scrollbar-width: none;
}

.artist-board__layer-list::-webkit-scrollbar {
  display: none;
}

.artist-board__layer-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 2.65rem;
  margin: 0;
  padding: 0;
  border-bottom: var(--border-subtle);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  line-height: 0;
}

.artist-board__layer-button small {
  position: absolute;
  right: 0.15rem;
  bottom: 0.05rem;
  font-family: var(--font-mono);
  font-size: 0.35rem;
  opacity: 0.45;
}

.artist-board__palette-panel,
.artist-board__brush-panel {
  position: absolute;
  top: 18px;
  right: auto;
  left: 18px;
  z-index: 6;
  width: min(17.875rem, 34vw);
  padding: 0.7rem;
}

.artist-board__size-panel[hidden],
.artist-board__palette-panel[hidden],
.artist-board__brush-panel[hidden],
.artist-board__delete-menu[hidden] {
  display: none;
}

.artist-board__palette {
  margin-bottom: 0.6rem;
}

.artist-board__palette:last-child {
  margin-bottom: 0;
}

.artist-board__palette h3 {
  margin-bottom: 0.35rem;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-wider);
}

.artist-board__palette > div {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  width: 100%;
}

.artist-board__palette button {
  aspect-ratio: 1;
  border: 1px solid rgb(240 238 232 / 45%);
}

.artist-board__brush-panel {
  display: grid;
  gap: 0.35rem;
  width: min(18rem, 36vw);
}

.artist-board__brush-panel button {
  display: grid;
  grid-template-columns: 3rem 1fr;
  align-items: center;
  padding: 0.6rem;
  text-align: left;
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wider);
}

.artist-board__brush-panel button:hover {
  background: rgb(27 27 25 / 5%);
}

.artist-board__brush-mark {
  display: block;
  width: 2rem;
  height: 0.4rem;
  background: currentColor;
}

.artist-board__brush-mark--soy {
  height: 0.55rem;
  border-radius: 55% 20% 45% 15%;
  opacity: 0.82;
}

.artist-board__brush-mark--sketch {
  height: 0.7rem;
  background-color: transparent;
  background-image: url("../assets/artist/brushes/sketch/thumbnail.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.artist-board__delete-menu {
  position: absolute;
  z-index: 8;
  min-width: 7rem;
  padding: 0.75rem 1rem;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wider);
}

.artist-board__delete-menu:hover {
  color: var(--color-background);
  background: var(--color-foreground);
}

.artist-board__completion {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 12;
  width: min(31rem, calc(100% - 4rem));
  padding: 1.4rem;
  border: var(--border-thin);
  background: var(--color-background);
  box-shadow: 0 1.5rem 4rem rgb(27 27 25 / 10%);
  transform: translate(-50%, -50%);
}

.artist-board__completion[hidden] { display: none; }

.artist-board__completion::before {
  position: fixed;
  z-index: -1;
  background: rgb(240 238 232 / 78%);
  content: "";
  inset: -100vmax;
  backdrop-filter: blur(3px);
}

.artist-board__completion > header {
  position: relative;
  padding-right: 2.5rem;
  margin-bottom: 2rem;
}

.artist-board__completion > header p,
.artist-board__completion label > span,
.artist-board__completion-status {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-wider);
}

.artist-board__completion > header p { margin-bottom: 0.45rem; opacity: 0.5; }

.artist-board__completion > header h3 {
  font-family: var(--font-interface);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-wide);
}

.artist-board__completion-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 2rem;
  height: 2rem;
  transition: transform var(--duration-normal) var(--ease-standard);
}

.artist-board__completion-close span,
.artist-board__completion-close span::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.1rem;
  height: 1px;
  background: currentColor;
  content: "";
}

.artist-board__completion-close span { transform: translate(-50%, -50%) rotate(45deg); }
.artist-board__completion-close span::before { transform: translate(-50%, -50%) rotate(90deg); }
.artist-board__completion-close:hover { transform: rotate(90deg); }

.artist-board__completion form { display: grid; gap: 1.2rem; }

.artist-board__completion form > label:not(.artist-board__completion-consent) {
  display: grid;
  gap: 0.45rem;
}

.artist-board__completion input[type="text"] {
  width: 100%;
  padding: 0.55rem 0;
  border-bottom: var(--border-thin);
  border-radius: 0;
  font-family: var(--font-interface);
  font-size: 1rem;
  letter-spacing: var(--letter-spacing-wide);
}

.artist-board__completion input[type="text"]:focus {
  border-color: var(--color-foreground);
  outline: none;
}

.artist-board__completion-consent {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: 0.75rem;
  align-items: start;
  margin-top: 0.35rem;
  cursor: pointer;
}

.artist-board__completion-consent input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.artist-board__completion-consent-mark {
  display: block;
  width: 0.85rem;
  height: 0.85rem;
  margin-top: 0.08rem;
  border: var(--border-thin);
}

.artist-board__completion-consent input:checked + .artist-board__completion-consent-mark {
  background: var(--color-foreground);
  box-shadow: inset 0 0 0 3px var(--color-background);
}

.artist-board__completion-consent input:focus-visible + .artist-board__completion-consent-mark {
  outline: 1px solid currentColor;
  outline-offset: 0.2rem;
}

.artist-board__completion-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 0.5rem;
  border: var(--border-thin);
  background: var(--color-line);
}

.artist-board__completion-actions button {
  min-height: 3.2rem;
  background: var(--color-background);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wider);
}

.artist-board__completion-actions button:not(:disabled):hover,
.artist-board__completion-actions button:not(:disabled):focus-visible {
  color: var(--color-background);
  background: var(--color-foreground);
}

.artist-board__completion-actions button:disabled { cursor: not-allowed; opacity: 0.25; }

.artist-board__completion-status {
  min-height: 1em;
  line-height: 1.5;
  opacity: 0.6;
}

.artist-board__template-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 13;
  width: min(42rem, calc(100% - 4rem));
  padding: 1.5rem;
  border: var(--border-thin);
  color: var(--color-foreground);
  background: var(--color-background);
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 22%);
  transform: translate(-50%, -50%);
}

.artist-board__template-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  transition: transform var(--duration-normal) var(--ease-standard);
}

.artist-board__template-close span,
.artist-board__template-close span::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.1rem;
  height: 1px;
  background: currentColor;
  content: "";
}

.artist-board__template-close span { transform: translate(-50%, -50%) rotate(45deg); }
.artist-board__template-close span::before { transform: translate(-50%, -50%) rotate(90deg); }
.artist-board__template-close:hover { transform: rotate(90deg); }

.artist-board__template-panel[hidden] { display: none; }

.artist-board__template-panel > p {
  margin-bottom: 0.45rem;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wider);
  opacity: 0.5;
}

.artist-board__template-panel > h3 {
  margin-bottom: 2rem;
  font-family: var(--font-interface);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-wide);
}

.artist-board__template-choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border: var(--border-thin);
  background: var(--color-line);
}

.artist-board__template-choices button {
  display: grid;
  min-height: 11rem;
  grid-template-rows: 1fr auto auto;
  place-items: center;
  gap: 0.6rem;
  padding: 1.2rem 0.7rem;
  background: var(--color-background);
}

.artist-board__template-choices button:hover,
.artist-board__template-choices button:focus-visible {
  color: var(--color-background);
  background: var(--color-foreground);
}

.artist-board__template-choices strong,
.artist-board__template-choices small {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-wider);
}

.artist-board__template-choices small { opacity: 0.55; }

.artist-board__template-shape {
  display: block;
  border: 1px solid currentColor;
}

.artist-board__template-shape--landscape { width: 4.5rem; height: 3rem; }
.artist-board__template-shape--square { width: 3.7rem; height: 3.7rem; }
.artist-board__template-shape--portrait { width: 3rem; height: 4.5rem; }

.artist-board__zoom-controls {
  position: absolute;
  right: 5rem;
  bottom: 0.8rem;
  z-index: 8;
  display: grid;
  grid-template-columns: 2rem 3.6rem 2rem;
  border: 1px solid rgb(240 238 232 / 35%);
  color: var(--color-background);
  background: rgb(27 27 25 / 75%);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wider);
}

.artist-board__zoom-controls[hidden] { display: none; }

.artist-board__zoom-controls button,
.artist-board__zoom-controls output {
  display: grid;
  min-height: 2rem;
  place-items: center;
}

.artist-board__zoom-controls output {
  border-right: 1px solid rgb(240 238 232 / 22%);
  border-left: 1px solid rgb(240 238 232 / 22%);
}

.artist-board__zoom-controls button:hover:not(:disabled) {
  color: var(--color-foreground);
  background: var(--color-background);
}

.artist-board__zoom-controls button:disabled { opacity: 0.3; }

.artist-board__zoom-controls button:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: -3px;
}

.artist-board__drag-canvas-label {
  position: absolute;
  z-index: 7;
  color: var(--color-background);
  font-family: var(--font-mono);
  font-size: 0.45rem;
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-wider);
  opacity: 0.55;
  pointer-events: none;
  transform: translateX(-50%);
}

.artist-board__drag-canvas-label[hidden] { display: none; }

.artist-board__pipette-indicator {
  position: absolute;
  z-index: 15;
  display: grid;
  width: 2.625rem;
  height: 2.625rem;
  place-items: center;
  border: 1px solid rgb(27 27 25 / 30%);
  background: var(--color-background);
  box-shadow: 0 0.5rem 1.2rem rgb(0 0 0 / 14%);
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.25rem) scale(0.94);
  transition: opacity 180ms var(--ease-standard), transform 220ms var(--ease-expressive);
}

.artist-board__pipette-swatch {
  position: absolute;
  inset: 0.34rem;
  border: 1px solid rgb(27 27 25 / 55%);
  background: var(--sampled-color, var(--color-foreground));
}

.artist-board__pipette-swatch::after {
  position: absolute;
  inset: 38%;
  border: 1px solid rgb(240 238 232 / 75%);
  content: "";
  mix-blend-mode: difference;
}
.artist-board__pipette-indicator[hidden] { display: none; }
.artist-board__pipette-indicator.is-visible { opacity: 1; transform: translateY(0) scale(1); }

.artist-view__board-version {
  position: absolute;
  right: 30px;
  bottom: 9px;
  z-index: 21;
  color: var(--color-foreground);
  font-family: var(--font-mono);
  font-size: 0.45rem;
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-wider);
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms var(--ease-standard), visibility 0s linear 350ms;
}

.artist-view.is-board-open .artist-view__board-version {
  visibility: visible;
  opacity: 0.58;
  transition-delay: 0s;
}

.artist-board__memory-notice {
  position: absolute;
  bottom: 0.8rem;
  left: 0.8rem;
  z-index: 9;
  max-width: 20rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgb(240 238 232 / 25%);
  color: var(--color-background);
  background: rgb(27 27 25 / 80%);
  font-family: var(--font-mono);
  font-size: 0.45rem;
  letter-spacing: var(--letter-spacing-wider);
}

.artist-board__memory-notice[hidden] { display: none; }


html[data-active-theme="artist"] .theme-stage__close,
html.is-theme-closing[data-closing-theme="artist"] .theme-stage__close {
  top: auto;
  right: auto;
  z-index: 40;
  bottom: max(2rem, calc(env(safe-area-inset-bottom) + 1rem));
  left: calc(50% - 1rem);
  transform: rotate(0deg);
}

html[data-active-theme="artist"] .theme-stage__close:hover,
html[data-active-theme="artist"] .theme-stage__close:focus-visible {
  transform: rotate(90deg);
}

html:has(.artist-view.is-board-open) .language-switcher {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

html:has(.artist-view.is-board-open) .theme-stage__close {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}


/*
 * CHEF — first visual study
 */

.chef-view__portrait-reveal {
  --reveal-x: 50%;
  --reveal-y: 50%;
  --reveal-radius: clamp(6.6rem, 12.1vw, 11rem);

  position: absolute;
  top: -18vh;
  right: 0;
  left: auto;
  z-index: 0;

  width: auto;
  height: 136vh;
  aspect-ratio: 1122 / 1402;
  max-width: none;

  opacity: 0;
  pointer-events: none;

  transform: translateX(
    calc(33.333% + 1.5rem)
  );

  -webkit-mask-image:
    radial-gradient(
      circle var(--reveal-radius)
      at var(--reveal-x) var(--reveal-y),
      #000 0%,
      #000 48%,
      rgb(0 0 0 / 78%) 66%,
      rgb(0 0 0 / 24%) 84%,
      transparent 100%
    );

  mask-image:
    radial-gradient(
      circle var(--reveal-radius)
      at var(--reveal-x) var(--reveal-y),
      #000 0%,
      #000 48%,
      rgb(0 0 0 / 78%) 66%,
      rgb(0 0 0 / 24%) 84%,
      transparent 100%
    );

  transition:
    opacity 900ms var(--ease-standard) 180ms,
    transform 1100ms var(--ease-expressive) 180ms;
}

.chef-view__portrait-reveal::after {
  display: none;
  content: "";

  position: absolute;
  inset: 0;

  opacity: 0.13;

  background-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgb(27 27 25 / 18%) 50%,
      transparent 100%
    ),
    linear-gradient(
      0deg,
      transparent 0%,
      rgb(255 255 255 / 22%) 50%,
      transparent 100%
    );

  background-size:
    0.75rem 0.75rem,
    0.75rem 0.75rem;

  mix-blend-mode: multiply;
}

.chef-view__portrait {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: right center;

  filter:
    grayscale(1)
    contrast(1.16)
    brightness(0.97);

  mix-blend-mode: multiply;
}

.chef-view__introduction {
  position: absolute;
  top: calc(21vh + 30px);
  left: calc(
    var(--page-padding-horizontal) +
    9.375rem -
    50px
  );
  right: var(--page-padding-horizontal);
  z-index: 1;

  display: flex;
  gap: var(--space-3);
  align-items: baseline;
}

.chef-view__kicker {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-wider);

  opacity: 0;
  transform: translateY(0.75rem);

  transition:
    opacity 600ms var(--ease-standard) 180ms,
    transform 800ms var(--ease-expressive) 180ms;
}

.chef-view__title {
  font-family: var(--font-interface);
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  letter-spacing: var(--letter-spacing-wide);

  opacity: 0;
  transform: translateY(1rem);

  transition:
    opacity 700ms var(--ease-standard) 260ms,
    transform 900ms var(--ease-expressive) 260ms;
}

.chef-view__navigation {
  position: absolute;
  top: calc(31vh + 30px);
  left: calc(
    var(--page-padding-horizontal) +
    9.375rem -
    50px
  );

  width: clamp(11.2rem, 18.2vw, 16.8rem);
  z-index: 1;

  opacity: 0;
  transform: translateY(1rem);

  transition:
    opacity 650ms var(--ease-standard) 380ms,
    transform 900ms var(--ease-expressive) 380ms;
}

.chef-view__navigation-item {
  border-top: var(--border-thin);
}

.chef-view__navigation-item:last-child {
  border-bottom: var(--border-thin);
}

.chef-view__navigation-button {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  width: 100%;
  padding: 0.875rem 0;
  align-items: center;

  text-align: left;
}

.chef-view__navigation-number {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-wider);

  opacity: 0.4;

  transition:
    opacity var(--duration-fast) var(--ease-standard);
}

.chef-view__navigation-label {
  font-family: var(--font-interface);
  font-size: clamp(0.6875rem, 0.9vw, 0.875rem);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-wide);

  transform: translateX(0);

  transition:
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-normal) var(--ease-expressive);
}

.chef-view__navigation-button:hover
  .chef-view__navigation-number,
.chef-view__navigation-button:focus-visible
  .chef-view__navigation-number,
.chef-view__navigation-item.is-active
  .chef-view__navigation-number {
  opacity: 1;
}

.chef-view__navigation-button:hover
  .chef-view__navigation-label,
.chef-view__navigation-button:focus-visible
  .chef-view__navigation-label,
.chef-view__navigation-item.is-active
  .chef-view__navigation-label {
  transform: translateX(0.5rem);
}

.chef-view__navigation-button:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.25rem;
}

.chef-view__recipe-categories {
  max-height: 0;
  margin: 0 0 0 2.5rem;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-0.375rem);

  transition:
    max-height 700ms var(--ease-expressive),
    margin-bottom 700ms var(--ease-expressive),
    opacity 350ms var(--ease-standard),
    visibility 0s linear 700ms,
    transform 600ms var(--ease-expressive);
}

.chef-view__navigation-item.is-active
  .chef-view__recipe-categories {
  max-height: 9.5rem;
  margin-bottom: 0.75rem;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);

  transition-delay: 0s;
}

.chef-view__recipe-category {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  width: 100%;
  padding: 0.28rem 0;
  align-items: baseline;
  text-align: left;
  opacity: 0.28;

  transition:
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-normal) var(--ease-expressive);
}

.chef-view__recipe-category-number {
  font-family: var(--font-mono);
  font-size: 0.4375rem;
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-wider);
}

.chef-view__recipe-category-label {
  overflow: hidden;
  font-family: var(--font-interface);
  font-size: clamp(0.5rem, 0.62vw, 0.625rem);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.1em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chef-view__recipe-category[aria-current="true"] {
  opacity: 0.78;
  transform: translateX(0.25rem);
}

.chef-view__recipe-category:not(:disabled):hover,
.chef-view__recipe-category:not(:disabled):focus-visible {
  opacity: 1;
  transform: translateX(0.5rem);
}

.chef-view__recipe-category:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.125rem;
}


/*
 * CHEF / CAREER — timeline study
 */

.chef-career {
  position: absolute;
  top: calc(21vh + 30px);
  right: var(--page-padding-horizontal);
  bottom: 12vh;
  left: clamp(27rem, 39vw, 42rem);
  z-index: 1;
  isolation: isolate;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(1rem);

  transition:
    opacity 600ms var(--ease-standard),
    visibility 0s linear 600ms,
    transform 850ms var(--ease-expressive);
}

.chef-career::before {
  position: absolute;
  inset: -1rem -2rem -1rem -1rem;
  z-index: -1;
  content: "";
  background:
    linear-gradient(
      90deg,
      rgb(240 238 232 / 96%) 0%,
      rgb(240 238 232 / 91%) 48%,
      rgb(240 238 232 / 68%) 70%,
      rgb(240 238 232 / 18%) 88%,
      transparent 100%
    );
  pointer-events: none;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  -webkit-mask-image:
    linear-gradient(90deg, #000 0%, #000 68%, rgb(0 0 0 / 62%) 82%, transparent 100%);
  mask-image:
    linear-gradient(90deg, #000 0%, #000 68%, rgb(0 0 0 / 62%) 82%, transparent 100%);
}

.chef-career.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);

  transition-delay: 80ms, 0s, 80ms;
}

.chef-career__eyebrow,
.chef-career__period,
.chef-career__timeline-year {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-wider);
}

.chef-career__eyebrow {
  margin-bottom: 0.875rem;
  opacity: 0.42;
}

.chef-career__heading {
  max-width: 13ch;
  font-family: var(--font-interface);
  font-size: clamp(2rem, 3.7vw, 4.25rem);
  font-weight: var(--font-weight-regular);
  line-height: 0.92;
  letter-spacing: 0.025em;
}

.chef-career__period {
  margin-top: clamp(2rem, 5vh, 4.5rem);
  opacity: 0.48;
}

.chef-career__chapter {
  margin-top: 0.625rem;
  font-family: var(--font-interface);
  font-size: clamp(1rem, 1.55vw, 1.5rem);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-wide);
}

.chef-career__text {
  max-width: 34rem;
  margin-top: 1rem;
  font-family: var(--font-interface);
  font-size: clamp(0.75rem, 0.95vw, 0.9375rem);
  line-height: 1.65;
  letter-spacing: 0.04em;
  opacity: 0.62;
}

.chef-career__places-label {
  margin-top: clamp(1.25rem, 2.5vh, 2rem);
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: var(--letter-spacing-wider);
  opacity: 0.35;
}

.chef-career__places {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 1.5rem;
  max-width: 38rem;
  margin-top: 0.625rem;
}

.chef-career__places li {
  font-family: var(--font-interface);
  font-size: clamp(0.6rem, 0.72vw, 0.75rem);
  line-height: 1.35;
  letter-spacing: 0.035em;
  opacity: 0.52;
}

.chef-career__period,
.chef-career__chapter,
.chef-career__text,
.chef-career__places-label,
.chef-career__places {
  transform: translateY(0);
  transition:
    opacity 180ms var(--ease-standard),
    transform 240ms var(--ease-expressive);
}

.chef-career.is-content-changing .chef-career__period,
.chef-career.is-content-changing .chef-career__chapter,
.chef-career.is-content-changing .chef-career__text,
.chef-career.is-content-changing .chef-career__places-label,
.chef-career.is-content-changing .chef-career__places {
  opacity: 0;
  transform: translateY(0.375rem);
}

.chef-career__timeline {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;

  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.chef-career__timeline::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: rgb(27 27 25 / 22%);
}

.chef-career__timeline-button {
  position: relative;
  width: 100%;
  padding: 0 0 1.125rem;
  text-align: left;
}

.chef-career__timeline-year {
  display: block;
  opacity: 0.34;
  transform: translateY(0);
  transition:
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-normal) var(--ease-expressive);
}

.chef-career__timeline-marker {
  position: absolute;
  bottom: -0.1875rem;
  left: 0;
  width: 0.4375rem;
  height: 0.4375rem;
  background: var(--color-background);
  border: 1px solid currentColor;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-normal) var(--ease-expressive);
}

.chef-career__timeline-button:hover .chef-career__timeline-year,
.chef-career__timeline-button:focus-visible .chef-career__timeline-year,
.chef-career__timeline li.is-active .chef-career__timeline-year {
  opacity: 1;
  transform: translateY(-0.25rem);
}

.chef-career__timeline-button:hover .chef-career__timeline-marker,
.chef-career__timeline-button:focus-visible .chef-career__timeline-marker,
.chef-career__timeline li.is-active .chef-career__timeline-marker {
  background: currentColor;
  transform: scale(1.35);
}

.chef-career__timeline-button:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.375rem;
}


/*
 * CHEF / PHILOSOPHY — five-principle study
 */

.chef-philosophy {
  position: absolute;
  top: calc(21vh + 30px);
  right: var(--page-padding-horizontal);
  bottom: 12vh;
  left: clamp(27rem, 39vw, 42rem);
  z-index: 1;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(1rem);

  transition:
    opacity 600ms var(--ease-standard),
    visibility 0s linear 600ms,
    transform 850ms var(--ease-expressive);
}

.chef-philosophy.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);

  transition-delay: 80ms, 0s, 80ms;
}

.chef-philosophy__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-wider);
}

.chef-philosophy__eyebrow {
  margin-bottom: 0.875rem;
  opacity: 0.42;
}

.chef-philosophy__heading {
  font-family: var(--font-interface);
  font-size: clamp(2rem, 3.7vw, 4.25rem);
  font-weight: var(--font-weight-regular);
  line-height: 0.92;
  letter-spacing: 0.025em;
}

.chef-philosophy__intro {
  position: absolute;
  top: 0;
  right: 0;

  max-width: 19rem;

  font-family: var(--font-interface);
  font-size: clamp(0.7rem, 0.9vw, 0.875rem);
  line-height: 1.7;
  letter-spacing: 0.04em;
  opacity: 0.62;
}

.chef-philosophy__intro span {
  display: block;
}

.chef-philosophy__principles {
  margin-top: clamp(2.5rem, 6vh, 5rem);
  border-bottom: var(--border-thin);
}

.chef-philosophy__principle {
  display: grid;
  grid-template-columns: 2.75rem minmax(7.5rem, 0.8fr) 1.6fr;
  gap: 1.25rem;
  align-items: center;

  min-height: clamp(2.75rem, 6.5vh, 4.25rem);
  border-top: var(--border-thin);

  transition:
    opacity var(--duration-fast) var(--ease-standard),
    padding-left var(--duration-normal) var(--ease-expressive);
}

.chef-philosophy__marker {
  width: 0.4375rem;
  height: 0.4375rem;
  background: var(--color-background);
  border: 1px solid currentColor;

  transition:
    background-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-normal) var(--ease-expressive);
}

.chef-philosophy__title {
  font-family: var(--font-interface);
  font-size: clamp(0.6875rem, 0.9vw, 0.875rem);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-wide);
}

.chef-philosophy__text {
  font-family: var(--font-interface);
  font-size: clamp(0.625rem, 0.78vw, 0.75rem);
  line-height: 1.45;
  letter-spacing: 0.035em;
  opacity: 0.52;
}

.chef-philosophy__principle:hover {
  padding-left: 0.5rem;
}

.chef-philosophy__principle:hover .chef-philosophy__marker {
  background: currentColor;
  transform: scale(1.35);
}

.chef-philosophy__principles:has(
  .chef-philosophy__principle:hover
) .chef-philosophy__principle:not(:hover) {
  opacity: 1;
}

/* PHILOSOPHY / stable readable hover without layout movement */
.chef-philosophy__principle {
  position: relative;
  isolation: isolate;
}

.chef-philosophy__principle:hover {
  padding-left: 0;
}

.chef-philosophy__principle > * {
  position: relative;
  z-index: 1;
}

.chef-philosophy__principle::before {
  position: absolute;
  inset: .18rem -.65rem;
  z-index: 0;
  content: "";
  background: rgb(240 238 232 / 82%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms var(--ease-standard);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

@media (hover: hover) and (pointer: fine) {
  .chef-philosophy__principle:hover::before {
    opacity: 1;
  }

  .chef-philosophy__principle:hover .chef-philosophy__text {
    opacity: .82;
  }
}


/*
 * CHEF / RECIPES — standard recipe study
 */

.chef-recipes {
  position: absolute;
  top: calc(17vh + 30px);
  right: var(--page-padding-horizontal);
  bottom: 9vh;
  left: clamp(25rem, 36vw, 39rem);
  z-index: 1;

  display: grid;
  grid-template-columns: minmax(12rem, 0.82fr) minmax(20rem, 1.18fr);
  gap: clamp(2rem, 4vw, 5rem);

  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(1rem);

  transition:
    opacity 600ms var(--ease-standard),
    visibility 0s linear 600ms,
    transform 850ms var(--ease-expressive);

  text-transform: uppercase;
}

.chef-recipes.is-visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);

  transition-delay: 80ms, 0s, 80ms;
}

.chef-recipes[data-recipe-mode="index"] {
  grid-template-columns: 1fr;
}

.chef-recipes[data-recipe-mode="index"] .chef-recipes__visual {
  display: none;
}

.chef-recipes[data-recipe-mode="index"] .chef-recipes__detail {
  grid-column: 1 / -1;
}

.chef-recipes[data-recipe-mode="detail"] {
  position: fixed;
  inset: 0;
  z-index: 4;

  grid-template-columns: minmax(16rem, 0.82fr) minmax(24rem, 1.18fr);
  gap: clamp(3rem, 6vw, 7rem);
  padding:
    calc(17vh + 30px)
    var(--page-padding-horizontal)
    9vh;

  background: var(--color-background);
  animation: chef-recipe-canvas-open 650ms var(--ease-standard) both;
}

.chef-recipes[data-recipe-mode="detail"] .chef-recipes__visual {
  grid-column: 1;
}

.chef-recipes[data-recipe-mode="detail"] .chef-recipes__detail {
  grid-column: 2;
}

.chef-view:has(.chef-recipes[data-recipe-mode="detail"])
  .chef-view__introduction,
.chef-view:has(.chef-recipes[data-recipe-mode="detail"])
  .chef-view__navigation {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-2rem);
  transition:
    visibility 0s linear 0s,
    opacity 120ms var(--ease-standard),
    transform 240ms var(--ease-expressive);
}

@keyframes chef-recipe-canvas-open {
  from {
    background: rgb(240 238 232 / 0%);
  }

  to {
    background: var(--color-background);
  }
}

.chef-recipes__visual {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(
      135deg,
      rgb(27 27 25 / 3%) 25%,
      transparent 25% 50%,
      rgb(27 27 25 / 3%) 50% 75%,
      transparent 75%
    );
  background-size: 1.25rem 1.25rem;
  border: var(--border-thin);
}

.chef-recipes__visual::after {
  content: "";
  position: absolute;
  inset: 1.25rem;
  border: 1px solid rgb(27 27 25 / 10%);
}

.chef-recipes__visual-image {
  position: absolute;
  inset: 0;
  z-index: 1;

  display: block;
  width: 100%;
  height: 100%;

  opacity: 0;
  object-fit: cover;
  object-position: 50% 50%;
  filter: grayscale(1) contrast(1.08);

  transition:
    opacity 650ms var(--ease-standard),
    filter 650ms var(--ease-standard);
}

.chef-recipes__visual-image.has-image {
  opacity: 1;
}

.chef-recipes__visual:hover .chef-recipes__visual-image.has-image {
  filter: grayscale(0) contrast(1);
}

.chef-recipes__visual-number {
  position: absolute;
  top: 50%;
  left: 50%;

  font-family: var(--font-interface);
  font-size: clamp(5rem, 10vw, 11rem);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  letter-spacing: -0.05em;
  opacity: 0.06;
  transform: translate(-50%, -50%);
}

.chef-recipes__image-label {
  position: absolute;
  bottom: 1.75rem;
  left: 1.75rem;
  z-index: 1;

  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: var(--letter-spacing-wider);
  opacity: 0.38;
}

.chef-recipes__detail {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.chef-recipes__index,
.chef-recipes__recipe-detail {
  position: absolute;
  inset: 0;

  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.625rem);

  transition:
    visibility 0s linear 220ms,
    opacity 220ms var(--ease-standard),
    transform 300ms var(--ease-expressive);
}

.chef-recipes.is-visible[data-recipe-mode="index"]
  .chef-recipes__index,
.chef-recipes.is-visible[data-recipe-mode="detail"].is-canvas-ready
  .chef-recipes__recipe-detail {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);

  transition-delay: 260ms, 260ms, 260ms;
}

.chef-recipes:not(.is-visible) .chef-recipes__index,
.chef-recipes:not(.is-visible) .chef-recipes__recipe-detail {
  visibility: hidden;
  pointer-events: none;
}

.chef-recipes.is-mode-changing .chef-recipes__visual-number,
.chef-recipes.is-mode-changing .chef-recipes__image-label {
  opacity: 0;
}

.chef-recipes__index-eyebrow,
.chef-recipes__index-count,
.chef-recipes__index-number,
.chef-recipes__index-meta,
.chef-recipes__back {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-wider);
}

.chef-recipes__index-eyebrow {
  opacity: 0.7;
}

.chef-recipes__index-title {
  margin-top: 0.75rem;
  font-family: var(--font-interface);
  font-size: clamp(1.85rem, 3.8vw, 4.4rem);
  font-weight: var(--font-weight-regular);
  line-height: 0.9;
  letter-spacing: 0.025em;
}

.chef-recipes__index-count {
  margin-top: clamp(1.5rem, 3.5vh, 3rem);
  padding: 0.75rem 0;
  border-top: var(--border-thin);
  border-bottom: var(--border-thin);
  opacity: 0.7;
}

.chef-recipes__index-search {
  display: block;
  width: 100%;
  margin-top: 0.85rem;
  padding: 0.65rem 0;
  border: 0;
  border-bottom: var(--border-thin);
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: currentColor;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
}

.chef-recipes__index-search::placeholder { color: currentColor; opacity: 0.34; }
.chef-recipes__index-search:focus { border-bottom-color: currentColor; }
.chef-recipes__index-search::-webkit-search-cancel-button { appearance: none; }

.chef-recipes__index-browser {
  display: block;
  margin-top: clamp(1.25rem, 2.6vh, 2rem);
  height: min(44vh, 25rem);
}

.chef-recipes__index-viewport {
  min-width: 0;
  height: 100%;
  padding-right: clamp(.75rem, 1.4vw, 1.25rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-color: rgb(27 27 25 / 42%) transparent;
  scrollbar-width: thin;
  touch-action: pan-y;
}

.chef-recipes__index-viewport::-webkit-scrollbar {
  width: 2px;
}

.chef-recipes__index-viewport::-webkit-scrollbar-track {
  background: transparent;
}

.chef-recipes__index-viewport::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: rgb(27 27 25 / 42%);
}

.chef-recipes__index-list {
  border-bottom: var(--border-thin);
  transform: none;
}

.chef-recipes__index-button {
  display: grid;
  grid-template-columns: 3.5rem 2.5rem minmax(8rem, 1fr) auto;
  gap: 1rem;
  width: 100%;
  min-height: clamp(3.25rem, 7vh, 4.75rem);
  padding: 0.75rem 0;
  align-items: center;
  border-top: var(--border-thin);
  text-align: left;

  transition:
    padding-left var(--duration-normal) var(--ease-expressive),
    opacity var(--duration-fast) var(--ease-standard);
}

.chef-recipes__index-number,
.chef-recipes__index-meta {
  opacity: 0.65;
}

.chef-recipes__index-thumb {
  display: block;
  width: 2.5rem;
  aspect-ratio: 1;
  background:
    linear-gradient(
      135deg,
      rgb(27 27 25 / 3%) 25%,
      transparent 25% 50%,
      rgb(27 27 25 / 3%) 50% 75%,
      transparent 75%
    );
  background-size: 0.625rem 0.625rem;
  border: var(--border-thin);
  object-fit: cover;
  filter: grayscale(1);

  transition:
    background-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-normal) var(--ease-expressive);
}

.chef-recipes__index-recipe-title {
  font-family: var(--font-interface);
  font-size: clamp(0.75rem, 1vw, 1rem);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-wide);
}

.chef-recipes__index-button:hover,
.chef-recipes__index-button:focus-visible {
  padding-left: 0.5rem;
}

.chef-recipes__index-button:hover .chef-recipes__index-thumb,
.chef-recipes__index-button:focus-visible .chef-recipes__index-thumb {
  background-color: rgb(27 27 25 / 5%);
  transform: scale(1.06);
}

.chef-recipes__index-button:hover .chef-recipes__index-number,
.chef-recipes__index-button:hover .chef-recipes__index-meta,
.chef-recipes__index-button:focus-visible .chef-recipes__index-number,
.chef-recipes__index-button:focus-visible .chef-recipes__index-meta {
  opacity: 0.75;
}

.chef-recipes__index-button:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.25rem;
}

.chef-recipes__index-range {
  width: 2.75rem;
  height: 100%;
  margin: 0;

  appearance: none;
  background: transparent;
  cursor: ns-resize;
  direction: ltr;
  writing-mode: vertical-lr;
}

.chef-recipes__index-range::-webkit-slider-runnable-track {
  width: 1px;
  background: rgb(27 27 25 / 22%);
}

.chef-recipes__index-range::-webkit-slider-thumb {
  width: 0.625rem;
  height: 0.625rem;
  margin-left: -0.28125rem;

  appearance: none;
  border: 0;
  border-radius: 0;
  background: currentColor;
}

.chef-recipes__index-range::-moz-range-track {
  width: 1px;
  background: rgb(27 27 25 / 22%);
}

.chef-recipes__index-range::-moz-range-progress {
  width: 1px;
  background: currentColor;
}

.chef-recipes__index-range::-moz-range-thumb {
  width: 0.625rem;
  height: 0.625rem;
  border: 0;
  border-radius: 0;
  background: currentColor;
}

.chef-recipes__index-range:disabled {
  cursor: default;
  opacity: 0.3;
}

.chef-recipes__index-range:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.375rem;
}

.chef-recipes__back {
  position: absolute;
  top: 0;
  right: clamp(7.5rem, 12vw, 11rem);
  z-index: 1;
  padding-bottom: 0.375rem;
  font-size: 0.5625rem;
  font-weight: var(--font-weight-regular);
  opacity: 0.58;

  transition:
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-normal) var(--ease-expressive);
}

.chef-recipes__back:hover,
.chef-recipes__back:focus-visible {
  opacity: 1;
  transform: translateX(-0.25rem);
}

.chef-recipes__back:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.25rem;
}

.chef-recipes__category,
.chef-recipes__meta dt,
.chef-recipes__meta dd,
.chef-recipes__tab,
.chef-recipes__ingredients span:first-child,
.chef-recipes__method > li > span {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-wider);
}

.chef-recipes__category {
  opacity: 0.7;
}

.chef-recipes__title {
  max-width: 9ch;
  margin-top: 0.75rem;
  font-family: var(--font-interface);
  font-size: clamp(1.85rem, 3.8vw, 4.4rem);
  font-weight: var(--font-weight-regular);
  line-height: 0.9;
  letter-spacing: 0.025em;
}

.chef-recipes__meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 1rem;
  margin-top: clamp(1.5rem, 3.5vh, 3rem);
  padding: 0.75rem 0;
  border-top: var(--border-thin);
  border-bottom: var(--border-thin);
}

.chef-recipes__meta dt {
  grid-row: 1;
  opacity: 0.62;
}

.chef-recipes__meta dd {
  grid-row: 2;
  margin-top: 0.35rem;
  letter-spacing: 0.08em;
  opacity: 0.9;
}

.chef-recipes__tabs {
  display: flex;
  gap: clamp(1.25rem, 2.25vw, 2.5rem);
  margin-top: clamp(1.25rem, 2.6vh, 2rem);
}

.chef-recipes__tab {
  position: relative;
  padding-bottom: 0.5rem;
  opacity: 0.62;
  transition:
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-normal) var(--ease-expressive);
}

.chef-recipes__tab::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-normal) var(--ease-expressive);
}

.chef-recipes__tab:hover,
.chef-recipes__tab:focus-visible,
.chef-recipes__tab[aria-selected="true"] {
  opacity: 1;
  transform: translateY(-0.125rem);
}

.chef-recipes__tab[aria-selected="true"]::after {
  transform: scaleX(1);
}

.chef-recipes__tab:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.25rem;
}

.chef-recipes__content {
  margin-top: clamp(1rem, 2.4vh, 1.75rem);
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 170ms var(--ease-standard),
    transform 220ms var(--ease-expressive);
}

.chef-recipes__content.is-changing {
  opacity: 0;
  transform: translateY(0.375rem);
}

.chef-recipes__ingredients {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 3vw, 3rem);
}

.chef-recipes__ingredients li {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0.5rem;
  padding: clamp(0.34rem, 0.7vh, 0.55rem) 0;
  border-bottom: var(--border-thin);
}

.chef-recipes__ingredients span:first-child {
  opacity: 0.72;
}

.chef-recipes__ingredients span:last-child {
  font-family: var(--font-interface);
  font-size: clamp(0.625rem, 0.72vw, 0.75rem);
  letter-spacing: 0.035em;
  opacity: 0.92;
}

.chef-recipes__method {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vh, 1.25rem) clamp(1.5rem, 3vw, 3rem);
}

.chef-recipes__method li {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 0.5rem;
  align-items: start;
}

.chef-recipes__method > li > span {
  opacity: 0.65;
}

.chef-recipes__method p,
.chef-recipes__note {
  font-family: var(--font-interface);
  font-size: clamp(0.625rem, 0.72vw, 0.75rem);
  line-height: 1.5;
  letter-spacing: 0.035em;
  opacity: 0.9;
}

.chef-recipes__note {
  max-width: 28rem;
}

html[data-active-theme="chef"]:has(
  .chef-recipes[data-recipe-mode="detail"].is-visible
) .theme-stage__close {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}


/*
 * CHEF / PHOTOS — horizontal timeline gallery
 */

.chef-photos {
  --photo-tile-size:
    max(
      54px,
      min(
        var(--photo-original-size, 90px),
        calc((100vh - 19rem) / 5)
      )
    );

  position: fixed;
  inset: 0;
  z-index: 2;

  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  transition:
    visibility 0s linear 700ms,
    opacity 700ms var(--ease-standard);
}

.chef-photos.is-visible {
  visibility: visible;
  opacity: 1;
  pointer-events: none;

  transition-delay: 0s, 180ms;
}

.chef-photos__close {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  z-index: 3;

  width: 2rem;
  height: 2rem;

  opacity: 0.55;
  pointer-events: auto;
  transform: translateX(-50%) rotate(0deg);

  transition:
    opacity var(--duration-normal) var(--ease-standard),
    transform 700ms var(--ease-expressive);
}

.chef-photos__close:hover,
.chef-photos__close:focus-visible {
  opacity: 1;
  transform: translateX(-50%) rotate(90deg);
}

.chef-photos__close:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.25rem;
}

.chef-photos__close span,
.chef-photos__close span::before {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 1.5rem;
  height: 1px;

  background-color: currentColor;
}

.chef-photos__close span {
  transform: translate(-50%, -50%) rotate(45deg);
}

.chef-photos__close span::before {
  content: "";
  transform: translate(-50%, -50%) rotate(90deg);
}

.chef-photos__viewport {
  position: absolute;
  top: calc(var(--page-padding-vertical) + var(--clock-size) + 1.5rem);
  right: var(--page-padding-horizontal);
  bottom: 6.625rem;
  left: var(--page-padding-horizontal);

  overflow: hidden;
  pointer-events: auto;
}

.chef-photos__track {
  position: absolute;
  top: 50%;
  left: 0;

  display: flex;
  align-items: flex-start;
  width: max-content;
  height: max-content;

  transform: translate3d(
    var(--photo-offset, 0px),
    -50%,
    0
  );

  will-change: transform;
  contain: layout paint;
}

.chef-photos__viewport.is-dragging .chef-photos__track {
  transition: none;
}

.chef-photos__year-group {
  position: relative;
  flex: 0 0 auto;
}

.chef-photos__year-grid {
  display: grid;
  grid-template-rows:
    repeat(var(--photo-rows), var(--photo-tile-size));
  grid-auto-columns: var(--photo-tile-size);
  grid-auto-flow: column;
}

.chef-photos__year-grid.is-mosaic {
  grid-template-columns:
    repeat(var(--mosaic-columns), var(--photo-tile-size));
  grid-auto-flow: initial;
}

.chef-photos__tile {
  position: relative;
  overflow: hidden;
  width: var(--photo-tile-size);
  height: var(--photo-tile-size);

  background: var(--color-background);
  cursor: pointer;
}

.chef-photos__empty-tile {
  display: block;
  width: var(--photo-tile-size);
  height: var(--photo-tile-size);
  pointer-events: none;
}

.chef-photos__image {
  width: 100%;
  height: 100%;
  object-fit: cover;

  filter: grayscale(1) contrast(1.1);
  transform: scale(1.02);
  pointer-events: none;
  -webkit-user-drag: none;

  transition:
    filter 550ms var(--ease-standard),
    transform 750ms var(--ease-expressive);
}

.chef-photos__tile:hover .chef-photos__image {
  filter: grayscale(0) contrast(1);
  transform: scale(1.08);
}

.chef-photos__tile:focus-visible {
  z-index: 3;
  outline: 1px solid currentColor;
  outline-offset: 0.1875rem;
}

.chef-photos__years {
  position: absolute;
  right: var(--page-padding-horizontal);
  left: var(--page-padding-horizontal);
  top: calc(var(--page-padding-vertical) + var(--clock-size) + 0.35rem);
  z-index: 3;

  display: none;
  align-items: center;
  gap: clamp(0.25rem, 0.65vw, 0.75rem);
  overflow-x: auto;
  padding: 0.375rem 0;
  scrollbar-width: none;
  pointer-events: auto;
}

.chef-photos__years::-webkit-scrollbar {
  display: none;
}

.chef-photos__year-button {
  flex: 0 0 auto;
  min-width: 2.75rem;
  padding: 0.35rem 0.45rem;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-wider);
  opacity: 0.35;
  cursor: pointer;
  transition:
    opacity var(--duration-normal) var(--ease-standard),
    background-color var(--duration-normal) var(--ease-standard),
    color var(--duration-normal) var(--ease-standard);
}

.chef-photos__year-button:hover,
.chef-photos__year-button:focus-visible {
  opacity: 0.75;
}

.chef-photos__year-button.is-active {
  background: var(--color-foreground);
  color: var(--color-background);
  opacity: 1;
}

.chef-photos__year-button:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.1875rem;
}

.chef-photos__timeline {
  position: absolute;
  right: var(--page-padding-horizontal);
  bottom: 4.4rem;
  left: var(--page-padding-horizontal);

  display: block;
  pointer-events: auto;
}

.chef-photos__timeline-range {
  --timeline-progress: 0%;

  width: 100%;
  height: 2.75rem;
  margin: 0;

  appearance: none;
  background: transparent;
  cursor: ew-resize;
}

.chef-photos__timeline-range::-webkit-slider-runnable-track {
  height: 1px;
  background:
    linear-gradient(
      to right,
      currentColor 0 var(--timeline-progress),
      rgb(27 27 25 / 22%) var(--timeline-progress) 100%
    );
}

.chef-photos__timeline-range::-webkit-slider-thumb {
  width: 0.625rem;
  height: 0.625rem;
  margin-top: -0.28125rem;

  appearance: none;
  border: 0;
  border-radius: 0;
  background: currentColor;
}

.chef-photos__timeline-range::-moz-range-track {
  height: 1px;
  background: rgb(27 27 25 / 22%);
}

.chef-photos__timeline-range::-moz-range-progress {
  height: 1px;
  background: currentColor;
}

.chef-photos__timeline-range::-moz-range-thumb {
  width: 0.625rem;
  height: 0.625rem;
  border: 0;
  border-radius: 0;
  background: currentColor;
}

.chef-photos__timeline-range:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.375rem;
}

.chef-photos__viewport,
.chef-photos__years,
.chef-photos__timeline {
  transition:
    visibility 0s linear 0s,
    opacity 450ms var(--ease-standard);
}

.chef-photos > .chef-photos__close {
  transition:
    visibility 0s linear 0s,
    opacity 450ms var(--ease-standard),
    transform 700ms var(--ease-expressive);
}

.chef-photos.is-viewer-open .chef-photos__viewport,
.chef-photos.is-viewer-open .chef-photos__years,
.chef-photos.is-viewer-open .chef-photos__timeline,
.chef-photos.is-viewer-open > .chef-photos__close {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  transition-delay: 450ms, 0s;
}

.chef-photos__viewer {
  position: absolute;
  inset: 0;
  z-index: 4;

  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background: var(--color-background);

  transition:
    visibility 0s linear 600ms,
    opacity 600ms var(--ease-standard);
}

.chef-photos.is-viewer-open .chef-photos__viewer {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;

  transition-delay: 0s, 120ms;
}

.chef-photos__viewer-frame {
  position: absolute;
  top: calc(var(--page-padding-vertical) + var(--clock-size) + 1.5rem);
  right: clamp(19rem, 30vw, 28rem);
  bottom: 6.625rem;
  left: var(--page-padding-horizontal);

  display: grid;
  place-items: center;
  overflow: hidden;
}

.chef-photos__viewer-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(
    100vh -
    var(--page-padding-vertical) -
    var(--clock-size) -
    8.125rem
  );

  opacity: 0;
  filter: grayscale(0) contrast(1);
  transform: scale(0.985);
  -webkit-user-drag: none;

  transition:
    opacity 650ms var(--ease-standard),
    transform 900ms var(--ease-expressive);
}

.chef-photos__viewer-image.is-loaded {
  opacity: 1;
  transform: scale(1);
}

.chef-photos__viewer-loader {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 0.4375rem;
  height: 0.4375rem;

  opacity: 0;
  border: 1px solid currentColor;
  transform: translate(-50%, -50%) scale(0.85);

  transition: opacity 180ms var(--ease-standard);
}

.chef-photos__viewer-loader.is-visible {
  opacity: 0.7;
  animation: chef-photo-loader 900ms var(--ease-standard) infinite alternate;
}

@keyframes chef-photo-loader {
  from {
    background: transparent;
    transform: translate(-50%, -50%) scale(0.85);
  }

  to {
    background: currentColor;
    transform: translate(-50%, -50%) scale(1.25);
  }
}

.chef-photos__viewer-error {
  position: absolute;
  top: 50%;
  left: 50%;

  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: var(--letter-spacing-wider);
  opacity: 0.45;
  transform: translate(-50%, -50%);
}

.chef-photos__viewer-metadata {
  position: absolute;
  top: 42%;
  right: var(--page-padding-horizontal);
  width: clamp(14rem, 21vw, 20rem);

  transform: translateY(-50%);
}

.chef-photos__viewer-year {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-wider);
  opacity: 0.4;
}

.chef-photos__viewer-title {
  margin-top: 0.75rem;
  font-family: var(--font-interface);
  font-size: clamp(1rem, 1.55vw, 1.5rem);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.chef-photos__viewer-description {
  max-width: 18rem;
  margin-top: 1rem;
  font-family: var(--font-interface);
  font-size: clamp(0.6875rem, 0.85vw, 0.8125rem);
  line-height: 1.65;
  letter-spacing: 0.04em;
  opacity: 0.55;
}

.chef-photos__viewer-close {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  z-index: 5;

  width: 2rem;
  height: 2rem;

  opacity: 0.55;
  transform: translateX(-50%) rotate(0deg);

  transition:
    opacity var(--duration-normal) var(--ease-standard),
    transform 700ms var(--ease-expressive);
}

.chef-photos__viewer-close:hover,
.chef-photos__viewer-close:focus-visible {
  opacity: 1;
  transform: translateX(-50%) rotate(90deg);
}

.chef-photos__viewer-close:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.25rem;
}

.chef-photos__viewer-close span,
.chef-photos__viewer-close span::before {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 1.5rem;
  height: 1px;
  background: currentColor;
}

.chef-photos__viewer-close span {
  transform: translate(-50%, -50%) rotate(45deg);
}

.chef-photos__viewer-close span::before {
  content: "";
  transform: translate(-50%, -50%) rotate(90deg);
}


.theme-stage.is-theme-visible .chef-view__kicker,
.theme-stage.is-theme-visible .chef-view__title,
.theme-stage.is-theme-visible .chef-view__navigation {
  opacity: 1;
  transform: translateY(0);
}

.theme-stage.is-theme-visible
  .chef-view__portrait-reveal[data-reveal-state="active"] {
  opacity: 1;
  transform: translateX(33.333%);
}

.theme-stage.is-theme-visible
  .chef-view__portrait-reveal[data-reveal-state="inactive"] {
  opacity: 0;
  transform: translateX(33.333%);
}

.theme-stage.is-theme-visible
  .chef-view__portrait-reveal[data-reveal-state="static"] {
  opacity: 1;
  transform: translateX(33.333%);

  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      rgb(0 0 0 / 16%) 8%,
      rgb(0 0 0 / 58%) 18%,
      #000 30%,
      #000 100%
    );
  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      rgb(0 0 0 / 16%) 8%,
      rgb(0 0 0 / 58%) 18%,
      #000 30%,
      #000 100%
    );
}

.theme-stage.is-theme-visible
  .chef-view[data-active-section="2"]
  .chef-view__portrait-reveal,
.theme-stage.is-theme-visible
  .chef-view[data-active-section="3"]
  .chef-view__portrait-reveal {
  opacity: 0;
}

.theme-stage.is-theme-visible
  .chef-view[data-active-section="3"]
  .chef-view__introduction,
.theme-stage.is-theme-visible
  .chef-view[data-active-section="3"]
  .chef-view__navigation {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-160%);

  transition-delay: 0s;
}

html[data-active-theme="chef"] .theme-stage__close,
html.is-theme-closing[data-closing-theme="chef"] .theme-stage__close {
  top: auto;
  right: auto;
  bottom: max(1.75rem, calc(env(safe-area-inset-bottom) + 0.75rem));
  left: calc(50% - 1rem);
  transform: rotate(0deg);
}

html[data-active-theme="chef"] .theme-stage__close:hover,
html[data-active-theme="chef"] .theme-stage__close:focus-visible {
  transform: rotate(90deg);
}

html[data-active-theme="chef"]:has(
  .chef-view[data-active-section="3"]
) .theme-stage__close {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

html[data-active-theme] .theme-menu,
html.is-theme-closing .theme-menu {
  opacity: 0;
  transform: translateY(2rem);
  pointer-events: none;
}


/* ==========================================================================
   Language switcher
   ========================================================================== */

.language-switcher {
  position: fixed;
  bottom: 2.25rem;
  left: calc(var(--page-padding-horizontal) + 0.125rem);
  z-index: var(--z-identity);

  display: flex;
  gap: 0.8125rem;
  align-items: center;
}

.language-switcher button {
  position: relative;

  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: var(--font-weight-regular);
  line-height: 1;
  letter-spacing: 0.2em;

  opacity: 0.35;
  transform: translateY(0);

  transition:
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-normal) var(--ease-expressive);
}

.language-switcher button[aria-pressed="true"] {
  opacity: 1;
}

.language-switcher button:hover,
.language-switcher button:focus-visible {
  opacity: 0.72;
  transform: translateY(0);
}

.language-switcher button[aria-pressed="true"]:hover,
.language-switcher button[aria-pressed="true"]:focus-visible {
  opacity: 1;
}

.language-switcher button:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.3125rem;
}

@media (pointer: coarse) {
  .language-switcher button:hover {
    transform: none;
  }
}


/* ==========================================================================
   Context menu
   ========================================================================== */

.context-menu {
  position: fixed;
  z-index: 10001;
  min-width: 10rem;
  padding: 0.375rem;
  color: var(--color-foreground);
  background: rgb(240 238 232 / 96%);
  border: 1px solid rgb(27 27 25 / 10%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.3rem);
  transition:
    opacity 180ms ease,
    visibility 180ms ease,
    transform 180ms ease;
}

.context-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.context-menu__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  width: 100%;
  padding: 0.625rem 0.75rem;
  color: inherit;
  background: transparent;
  border: 0;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-align: left;
  cursor: pointer;
}

.context-menu__item:hover,
.context-menu__item:focus-visible {
  background: rgb(27 27 25 / 4%);
  outline: none;
}

.context-menu__state {
  opacity: 0.5;
}

.context-menu__copyright {
  padding: 0.5rem 0.75rem 0.625rem;
  border-top: 1px solid rgb(27 27 25 / 10%);

  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: var(--font-weight-light);
  line-height: 1;
  letter-spacing: 0.14em;

  opacity: 0.34;
  white-space: nowrap;
}

.context-menu__feedback {
  position: fixed;
  bottom: 3rem;
  left: 50%;
  z-index: 10001;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.5rem);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.context-menu__feedback.is-visible {
  opacity: 0.5;
  transform: translate(-50%, 0);
}


/* ==========================================================================
   No JavaScript
   ========================================================================== */

noscript {
  position: fixed;
  inset: 0;
  z-index: 10000;

  display: grid;
  place-items: center;

  padding: var(--space-7);

  color: var(--color-foreground);
  background-color: var(--color-background);

  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wide);
  text-align: center;
}


/* ==========================================================================
   Intro animation
   ========================================================================== */

/*
 * Elements are prepared by AnimationManager before the first visible frame.
 */

.is-intro-hidden {
  visibility: hidden;
  opacity: 0;
}

.is-intro-visible {
  visibility: visible;
  opacity: 1;
}


/*
 * Soy yo
 */

.identity__title {
  transform: translateY(0);
  filter: blur(0);

  transition:
    opacity 700ms var(--ease-expressive),
    transform 900ms var(--ease-expressive),
    filter 700ms var(--ease-standard);
}

.identity__title.is-intro-hidden {
  transform: translateY(1rem);
  filter: blur(0.1875rem);
}


/*
 * Matthias Krause
 */

.identity__name {
  transform: translateY(0);

  transition:
    opacity 550ms var(--ease-standard),
    transform 700ms var(--ease-expressive);
}

.identity__name.is-intro-hidden {
  transform: translateY(0.5rem);
}


/*
 * Clock
 */

.clock {
  transform: translateY(0) scale(1);

  transition:
    opacity 700ms var(--ease-standard),
    transform 900ms var(--ease-expressive);
}

.clock.is-intro-hidden {
  transform:
    translateY(0.75rem)
    scale(0.97);
}


/*
 * Theme menu container
 */

.theme-menu {
  transform: translateY(0);

  transition:
    opacity 400ms var(--ease-standard),
    transform 700ms var(--ease-expressive);
}


/*
 * Individual theme menu entries
 */

.theme-menu__item {
  transform: translateY(0);

  transition:
    opacity 600ms var(--ease-standard),
    transform 800ms var(--ease-expressive),
    color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-normal) var(--ease-standard);
}

.theme-menu__item.is-intro-hidden {
  transform: translateY(1.5rem);
}


/*
 * Prevent interaction while the intro is running.
 */

.soyyo.is-intro-prepared .theme-menu,
.soyyo.is-intro-running .theme-menu {
  pointer-events: none;
}


/*
 * Language selection remains hidden until the complete intro has finished.
 */

.language-switcher {
  visibility: hidden;
  opacity: 0;

  transform: translateY(0.5rem);

  transition:
    visibility 0s linear var(--duration-normal),
    opacity var(--duration-normal) var(--ease-standard),
    transform var(--duration-slow) var(--ease-expressive);
}

.soyyo.is-intro-complete .language-switcher {
  visibility: visible;
  opacity: 1;

  transform: translateY(0);

  transition-delay: 0s;
}


/*
 * Restore interaction after the complete intro sequence.
 */

.soyyo.is-intro-complete .theme-menu {
  pointer-events: auto;
}

/* ARTIST / ARTWORK — THE CURATORIAL WALL */
.artwork-gallery { position:absolute; inset:0; z-index:18; overflow:hidden; background:var(--color-background); opacity:0; transition:opacity 450ms var(--ease-standard); }
.artwork-gallery[hidden] { display:none; }
.artwork-gallery.is-visible { opacity:1; }
.artwork-gallery__viewport { position:absolute; inset:0; overflow:hidden; cursor:grab; touch-action:none; }
.artwork-gallery.is-dragging .artwork-gallery__viewport { cursor:grabbing; }
.artwork-gallery__wall { position:absolute; top:0; left:0; width:5350px; height:1900px; will-change:transform; }
.artwork-gallery__item { position:absolute; top:var(--art-y); left:var(--art-x); width:var(--art-width); padding:10px; border:2px solid var(--color-foreground); background:var(--color-background); box-shadow:0 13px 22px rgb(27 27 25 / 14%); transition:filter 500ms var(--ease-standard),opacity 500ms var(--ease-standard),transform 650ms var(--ease-expressive),box-shadow 500ms var(--ease-standard); }
.artwork-gallery__item img { display:block; width:100%; height:auto; filter:grayscale(1) contrast(1.05); transition:filter 700ms var(--ease-standard); pointer-events:none; }
.artwork-gallery__item video { display:none; width:100%; height:auto; background:var(--color-background); pointer-events:none; }
.artwork-gallery__item.is-playing img { display:none; }
.artwork-gallery__item.is-playing video { display:block; }
.artwork-gallery__item.has-animation::after { position:absolute; right:.45rem; bottom:.45rem; width:.42rem; height:.42rem; border:1px solid var(--color-background); content:""; background:var(--color-foreground); opacity:.72; }
.artwork-gallery__item:hover,.artwork-gallery__item:focus-visible { transform:translateY(-4px); box-shadow:0 18px 32px rgb(27 27 25 / 20%); }
.artwork-gallery__item:focus-visible { outline:1px solid currentColor; outline-offset:5px; }
.artwork-gallery.has-selection .artwork-gallery__item:not(.is-active) { opacity:.24; filter:blur(.25px); }
.artwork-gallery__item.is-active { z-index:4; transform:scale(1.5); box-shadow:0 22px 42px rgb(27 27 25 / 24%); }
.artwork-gallery__item.is-active img { filter:grayscale(0) contrast(1.04); }
.artwork-gallery__item.is-active video { filter:none; }
.artwork-gallery__details { position:absolute; top:35%; right:clamp(3rem,8vw,10rem); z-index:6; width:clamp(15rem,21vw,22rem); padding:1.5rem; background:rgb(240 238 232 / 92%); backdrop-filter:blur(8px); animation:artwork-details-in 650ms var(--ease-expressive) both; }
.artwork-gallery__details[hidden] { display:none; }
.artwork-gallery__details-number,.artwork-gallery__meta,.artwork-gallery__description,.artwork-gallery__drag-label,.artwork-gallery__loader { font-family:var(--font-mono); letter-spacing:var(--letter-spacing-wider); }
.artwork-gallery__details-number { margin-bottom:.5rem; font-size:.625rem; opacity:.45; }
.artwork-gallery__details h3 { font-family:var(--font-interface); font-size:clamp(1rem,1.45vw,1.4rem); font-weight:400; letter-spacing:var(--letter-spacing-wide); }
.artwork-gallery__meta { margin-top:.75rem; font-size:.6875rem; }
.artwork-gallery__rule { display:block; width:2rem; margin:1.25rem 0; border-top:var(--border-thin); }
.artwork-gallery__description { font-size:.6875rem; line-height:1.65; }
.artwork-gallery__drag-label { position:absolute; bottom:5.4rem; left:50%; z-index:5; transform:translateX(-50%); font-size:.625rem; opacity:1; transition:opacity 1400ms var(--ease-standard),visibility 0s linear 1400ms; }
.artwork-gallery.has-dragged .artwork-gallery__drag-label { visibility:hidden; opacity:0; }
.artwork-gallery__map { position:absolute; right:2.5rem; bottom:2rem; z-index:5; width:11rem; height:6rem; overflow:hidden; border:1px dashed rgb(27 27 25 / 48%); background:rgb(240 238 232 / 82%); }
.artwork-gallery__map>div { position:relative; width:100%; height:100%; }
.artwork-gallery__map span { position:absolute; top:var(--map-y); left:var(--map-x); width:var(--map-w); height:calc(var(--map-w)*1.25); border:1px solid rgb(27 27 25 / 38%); }
.artwork-gallery__map span.is-active { border-color:currentColor; border-width:2px; }
.artwork-gallery__close { position:absolute; bottom:1.55rem; left:50%; z-index:7; width:2.5rem; height:2.5rem; transform:translateX(-50%); transition:transform 450ms var(--ease-expressive); }
.artwork-gallery__close:hover { transform:translateX(-50%) rotate(90deg); }
.artwork-gallery__close span,.artwork-gallery__close span::before { position:absolute; top:50%; left:50%; width:1.75rem; height:1px; content:""; background:currentColor; }
.artwork-gallery__close span { transform:translate(-50%,-50%) rotate(45deg); }
.artwork-gallery__close span::before { transform:translate(-50%,-50%) rotate(90deg); }
.artwork-gallery__loader { position:absolute; top:50%; left:50%; z-index:10; display:grid; grid-template-columns:1.25rem auto 2.25rem; align-items:center; gap:.8rem; font-family:var(--font-mono); font-size:.625rem; letter-spacing:var(--letter-spacing-wider); opacity:0; transform:translate(-50%,-50%); pointer-events:none; transition:opacity 300ms var(--ease-standard); }
.artwork-gallery__loader-square { position:relative; display:block; width:1.1rem; height:1.1rem; overflow:hidden; border:1px solid currentColor; }
.artwork-gallery__loader-square i { position:absolute; right:0; bottom:0; left:0; display:block; height:var(--artwork-load-progress,0%); background:currentColor; transition:height 240ms var(--ease-standard); }
.artwork-gallery__loader output { min-width:2.25rem; font:inherit; text-align:right; }
.artwork-gallery.is-loading .artwork-gallery__loader,.artwork-gallery.is-loading-original .artwork-gallery__loader { opacity:.6; }
@keyframes artwork-details-in { from { opacity:0; transform:translateX(1rem); } to { opacity:1; transform:translateX(0); } }
@media (max-width:1180px) { .artwork-gallery__details { right:2rem; } .artwork-gallery__map { right:1.5rem; width:8.5rem; } }

html:has(.artist-view.is-artwork-open) .theme-stage__close {
  visibility:hidden;
  opacity:0;
  pointer-events:none;
}

/* ARTIST / USER ART — THE LIVING ARCHIVE */
.user-art-archive { position:absolute; inset:0; z-index:19; overflow:hidden; color:var(--color-foreground); background:var(--color-background); opacity:0; transition:opacity 450ms var(--ease-standard); }
.user-art-archive[hidden] { display:none; }
.user-art-archive.is-visible { opacity:1; }
.user-art-archive:focus { outline:0; }
.user-art-archive__header { position:absolute; top:calc(18vh + 1rem); left:var(--page-padding-horizontal); z-index:5; }
.user-art-archive__header p,.user-art-archive__details,.user-art-archive__status { font-family:var(--font-mono); letter-spacing:var(--letter-spacing-wider); }
.user-art-archive__header p { margin-bottom:1.25rem; font-size:.625rem; }
.user-art-archive__header h2 { font-family:var(--font-interface); font-size:clamp(1.25rem,2vw,2rem); font-weight:400; letter-spacing:var(--letter-spacing-wide); }
.user-art-archive__details { position:absolute; top:43%; left:calc(var(--page-padding-horizontal) + 1.8rem); z-index:5; min-width:12rem; transform:translateY(-50%); }
.user-art-archive__details h3 { font-family:var(--font-interface); font-size:clamp(1rem,1.5vw,1.45rem); font-weight:400; letter-spacing:var(--letter-spacing-wide); }
.user-art-archive__details span { display:block; width:2rem; margin:1.5rem 0; border-top:var(--border-thin); }
.user-art-archive__details p { font-size:.675rem; }
.user-art-archive__viewport { position:absolute; top:13%; right:12%; bottom:24%; left:25%; overflow:visible; }
.user-art-archive__stack { position:absolute; inset:0; perspective:1300px; }
.user-art-archive__sheet { position:absolute; top:50%; left:47%; width:min(35vw,36rem); aspect-ratio:var(--sheet-ratio,1); padding:0; overflow:hidden; border:1px solid rgb(27 27 25 / 18%); background:var(--color-background); box-shadow:0 13px 24px rgb(27 27 25 / 14%); opacity:var(--archive-opacity,1); cursor:pointer; transform:translate3d(calc(-50% + var(--archive-x,0px)),calc(-50% + var(--archive-y,0px)),var(--archive-z,0px)) scale(var(--archive-scale,1)); transform-origin:center; transition:transform 700ms var(--ease-expressive),opacity 500ms var(--ease-standard),border-color 280ms var(--ease-standard),box-shadow 500ms var(--ease-standard); }
.user-art-archive__sheet img { display:block; width:100%; height:100%; object-fit:contain; background:var(--color-background); pointer-events:none; }
.user-art-archive__sheet.is-active { z-index:20; border-color:rgb(27 27 25 / 8%); box-shadow:0 20px 34px rgb(27 27 25 / 20%); }
.user-art-archive__sheet:focus-visible { outline:1px solid currentColor; outline-offset:5px; }
.user-art-archive__navigation { position:absolute; right:20%; bottom:5.8rem; left:25%; z-index:7; display:grid; grid-template-columns:auto minmax(12rem,1fr) auto; align-items:center; gap:1rem; font-family:var(--font-mono); font-size:.5625rem; letter-spacing:var(--letter-spacing-wider); }
.user-art-archive__navigation[hidden] { display:none; }
.user-art-archive__previous,.user-art-archive__next { min-width:5.25rem; min-height:2.75rem; font:inherit; letter-spacing:inherit; opacity:.72; transition:opacity 220ms var(--ease-standard); }
.user-art-archive__previous { text-align:right; }
.user-art-archive__next { text-align:left; }
.user-art-archive__previous:disabled,.user-art-archive__next:disabled { opacity:.2; cursor:default; }
.user-art-archive__index { position:relative; display:grid; align-items:center; padding-top:1.25rem; }
.user-art-archive__counter { position:absolute; top:0; left:clamp(1.75rem,var(--archive-progress,0%),calc(100% - 1.75rem)); font:inherit; white-space:nowrap; transform:translateX(-50%); }
.user-art-archive__ticks { position:absolute; top:2.59375rem; right:.3125rem; left:.3125rem; display:flex; justify-content:space-between; pointer-events:none; }
.user-art-archive__ticks i { width:1px; height:.35rem; background:currentColor; opacity:.28; transform:translateY(-50%); }
.user-art-archive__range { width:100%; height:2.75rem; margin:0; appearance:none; background:transparent; cursor:ew-resize; touch-action:pan-y; }
.user-art-archive__range::-webkit-slider-runnable-track { height:1px; background:linear-gradient(to right,currentColor 0 var(--archive-progress),var(--color-line) var(--archive-progress) 100%); }
.user-art-archive__range::-webkit-slider-thumb { width:.625rem; height:.625rem; margin-top:-.28125rem; appearance:none; border:0; border-radius:0; background:currentColor; }
.user-art-archive__range::-moz-range-track { height:1px; background:var(--color-line); }
.user-art-archive__range::-moz-range-progress { height:1px; background:currentColor; }
.user-art-archive__range::-moz-range-thumb { width:.625rem; height:.625rem; border:0; border-radius:0; background:currentColor; }
.user-art-archive__range:focus-visible { outline:1px solid currentColor; outline-offset:.125rem; }
.user-art-archive__instruction { position:absolute; top:3.2rem; left:50%; visibility:visible; white-space:nowrap; opacity:.65; transform:translateX(-50%); transition:opacity 1400ms var(--ease-standard),visibility 0s linear 1400ms; }
.user-art-archive.has-navigation-interaction .user-art-archive__instruction { visibility:hidden; opacity:0; }
.user-art-archive__status { position:absolute; top:50%; left:50%; z-index:6; max-width:25rem; font-size:.625rem; text-align:center; transform:translate(-50%,-50%); }
.user-art-archive:not(.is-empty):not(.is-loading) .user-art-archive__status:empty { display:none; }
.user-art-archive__close { position:absolute; bottom:1.55rem; left:50%; z-index:7; width:2.5rem; height:2.5rem; transform:translateX(-50%); transition:transform 450ms var(--ease-expressive); }
.user-art-archive__close span,.user-art-archive__close span::before { position:absolute; top:50%; left:50%; width:1.75rem; height:1px; content:""; background:currentColor; }
.user-art-archive__close span { transform:translate(-50%,-50%) rotate(45deg); }
.user-art-archive__close span::before { transform:translate(-50%,-50%) rotate(90deg); }
@media (hover:hover) and (pointer:fine) {
  .user-art-archive__sheet:hover { border-color:rgb(27 27 25 / 48%); box-shadow:0 18px 30px rgb(27 27 25 / 18%); }
  .user-art-archive__previous:not(:disabled):hover,.user-art-archive__next:not(:disabled):hover { opacity:1; }
  .user-art-archive__close:hover { transform:translateX(-50%) rotate(90deg); }
}
html:has(.artist-view.is-user-art-open) .theme-stage__close { visibility:hidden; opacity:0; pointer-events:none; }
@media (max-width:1180px) {
  .user-art-archive__viewport { right:10%; left:23%; }
  .user-art-archive__sheet { width:min(43vw,32rem); }
  .user-art-archive__details { left:var(--page-padding-horizontal); }
  .user-art-archive__navigation { right:10%; left:23%; }
}

/* ARTIST / SPECIAL THANKS — THREE INFLUENCES */
.artist-thanks { position:absolute; inset:0; z-index:18; overflow:hidden; color:var(--color-foreground); background:transparent; opacity:0; transition:opacity 450ms var(--ease-standard); }
.artist-thanks[hidden] { display:none; }
.artist-thanks.is-visible { opacity:1; }
.artist-thanks::before { position:absolute; inset:0; content:""; opacity:.22; pointer-events:none; background:linear-gradient(90deg,transparent 0 15%,currentColor 15% calc(15% + 1px),transparent calc(15% + 1px) 49%,currentColor 49% calc(49% + 1px),transparent calc(49% + 1px)); mask-image:linear-gradient(to bottom,transparent 12%,#000 28%,#000 78%,transparent 92%); }
.artist-thanks__header { position:absolute; top:calc(21vh + 30px); left:calc(var(--page-padding-horizontal) + 9.375rem - 50px); display:flex; align-items:baseline; gap:var(--space-3); }
.artist-thanks__kicker { font-family:var(--font-mono); font-size:var(--font-size-xs); letter-spacing:var(--letter-spacing-wider); }
.artist-thanks__header h2 { font-family:var(--font-interface); font-size:clamp(1.5rem,2.5vw,2.5rem); font-weight:400; line-height:1; letter-spacing:var(--letter-spacing-wide); }
.artist-thanks__names { position:absolute; top:calc(31vh + 30px); left:calc(var(--page-padding-horizontal) + 9.375rem - 50px); width:clamp(11.2rem,18.2vw,16.8rem); }
.artist-thanks__names li { border-top:var(--border-thin); }
.artist-thanks__names li:last-child { border-bottom:var(--border-thin); }
.artist-thanks__names button { display:grid; grid-template-columns:2.5rem 1fr; align-items:center; width:100%; padding:.875rem 0; text-align:left; background:var(--color-background); }
.artist-thanks__names button span { font-family:var(--font-mono); font-size:.625rem; opacity:.35; }
.artist-thanks__names button strong { font-family:var(--font-interface); font-size:clamp(.6875rem,.9vw,.875rem); font-weight:400; letter-spacing:var(--letter-spacing-wide); transform:translateX(0); transition:transform var(--duration-normal) var(--ease-expressive); }
.artist-thanks__names li.is-active button,.artist-thanks__names button:hover,.artist-thanks__names button:focus-visible { background:var(--color-background); }
.artist-thanks__names li.is-active button span { opacity:1; }
.artist-thanks__names li.is-active button strong,.artist-thanks__names button:hover strong,.artist-thanks__names button:focus-visible strong { transform:translateX(.5rem); }
.artist-thanks__names button:focus-visible { outline:1px solid currentColor; outline-offset:.25rem; }
.artist-thanks__tribute { position:absolute; top:34%; right:clamp(6rem,13vw,15rem); width:clamp(19rem,31vw,31rem); min-height:15rem; padding:1.2rem; transition:opacity 400ms var(--ease-standard),transform 600ms var(--ease-expressive); }
.artist-thanks__role,.artist-thanks__text,.artist-thanks__personal-thanks,.artist-thanks__signature { font-family:var(--font-mono); letter-spacing:var(--letter-spacing-wider); }
.artist-thanks__role { margin-bottom:.8rem; font-size:.625rem; opacity:.5; }
.artist-thanks__tribute h3 { font-family:var(--font-interface); font-size:clamp(1.6rem,3vw,3.25rem); font-weight:400; line-height:1.05; letter-spacing:var(--letter-spacing-wide); }
.artist-thanks__line { display:block; width:2.2rem; margin:1.65rem 0; border-top:var(--border-thin); }
.artist-thanks__text { max-width:29rem; font-size:clamp(.65rem,.85vw,.78rem); line-height:1.8; }
.artist-thanks__personal-thanks { margin-top:1.35rem; font-size:clamp(.625rem,.8vw,.75rem); line-height:1.5; }
.artist-thanks__socials { display:flex; align-items:center; gap:1rem; margin-top:1.35rem; }
.artist-thanks__socials[hidden] { display:none; }
.artist-thanks__social { display:grid; width:1.25rem; height:1.25rem; place-items:center; color:var(--color-foreground); opacity:.4; transition:opacity var(--duration-normal) var(--ease-standard),transform var(--duration-normal) var(--ease-expressive); }
.artist-thanks__social:hover,.artist-thanks__social:focus-visible { opacity:1; transform:scale(1.08); }
.artist-thanks__social:focus-visible { outline:1px solid currentColor; outline-offset:.3rem; }
.artist-thanks__social span { display:block; width:1.125rem; height:1.125rem; background:currentColor; mask-position:center; mask-repeat:no-repeat; mask-size:contain; -webkit-mask-position:center; -webkit-mask-repeat:no-repeat; -webkit-mask-size:contain; }
.artist-thanks__social--youtube span { mask-image:url("../assets/icons/youtube.svg"); -webkit-mask-image:url("../assets/icons/youtube.svg"); }
.artist-thanks__social--instagram span { mask-image:url("../assets/icons/instagram.svg"); -webkit-mask-image:url("../assets/icons/instagram.svg"); }
.artist-thanks.is-mentor .artist-thanks__line { width:4.5rem; }
.artist-thanks__signature { position:absolute; right:var(--page-padding-horizontal); bottom:2.35rem; font-size:.55rem; opacity:.35; }
.artist-thanks__close { position:absolute; bottom:1.55rem; left:50%; z-index:2; width:2.5rem; height:2.5rem; transform:translateX(-50%); transition:transform 450ms var(--ease-expressive); }
.artist-thanks__close:hover { transform:translateX(-50%) rotate(90deg); }
.artist-thanks__close span,.artist-thanks__close span::before { position:absolute; top:50%; left:50%; width:1.75rem; height:1px; content:""; background:currentColor; }
.artist-thanks__close span { transform:translate(-50%,-50%) rotate(45deg); }
.artist-thanks__close span::before { transform:translate(-50%,-50%) rotate(90deg); }
html:has(.artist-view.is-thanks-open) .theme-stage__close { visibility:hidden; opacity:0; pointer-events:none; }
@media (max-width:1100px) { .artist-thanks__names { left:calc(var(--page-padding-horizontal) + 5rem); width:14rem; } .artist-thanks__tribute { right:5rem; width:42vw; } }


/*
 * PROJECTS — ARCHITECTURAL PROJECT REGISTER
 */

.projects-view {
  overflow: hidden;
  color: var(--color-foreground);
  background: var(--color-background);
}

.projects-view__kicker {
  position: absolute;
  top: calc(18vh + 1rem);
  left: var(--page-padding-horizontal);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: clamp(0.625rem, 0.68vw, 0.75rem);
  letter-spacing: var(--letter-spacing-wider);
  opacity: 0;
  transform: translateY(0.75rem);
  transition:
    opacity 650ms var(--ease-standard) 120ms,
    transform 850ms var(--ease-expressive) 120ms;
}

.projects-view__register {
  position: absolute;
  top: 24%;
  left: clamp(8.5rem, 13.25vw, 15rem);
  width: min(65vw, 72rem);
  height: 61%;
}

.projects-view__active,
.projects-view__preview {
  display: grid;
  grid-template-columns: clamp(2.2rem, 4.5vw, 4.5rem) 1fr;
  column-gap: clamp(1.25rem, 2vw, 2.4rem);
  width: 100%;
  text-align: left;
}

.projects-view__active {
  min-height: 58%;
}

.projects-view__dash {
  display: block;
  width: clamp(1.75rem, 3vw, 3rem);
  margin-top: 4.2rem;
  border-top: 2px solid currentColor;
}

.projects-view__active-content,
.projects-view__preview-content {
  display: block;
  min-width: 0;
  border-left: var(--border-thin);
}

.projects-view__active-content {
  padding: 0 0 1.1rem clamp(1.5rem, 2.25vw, 2.5rem);
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 260ms var(--ease-standard),
    transform 520ms var(--ease-expressive);
}

.projects-view__number,
.projects-view__preview-number,
.projects-view__status,
.projects-view__category,
.projects-view__description,
.projects-view__preview-status,
.projects-view__rail-label {
  font-family: var(--font-mono);
  letter-spacing: var(--letter-spacing-wider);
}

.projects-view__number {
  margin-bottom: 0.2rem;
  font-size: clamp(1.1rem, 1.8vw, 1.8rem);
}

.projects-view__active h2 {
  overflow: hidden;
  max-width: 100%;
  font-family: var(--font-interface);
  font-size: clamp(4.5rem, 9.3vw, 9.5rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.projects-view[data-active-project="yam-yam-sushi"] .projects-view__active h2 {
  font-size: clamp(3.1rem, 5.8vw, 6rem);
  letter-spacing: -0.035em;
}

.projects-view[data-active-project="yamu-maru-crew"] .projects-view__active h2 {
  font-size: clamp(3rem, 5.5vw, 5.8rem);
  letter-spacing: -0.035em;
}

.projects-view__external-link {
  display: inline-flex;
  min-height: 2.6rem;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.7rem;
  font: 400 clamp(0.55rem, 0.62vw, 0.6875rem) var(--font-mono);
  letter-spacing: var(--letter-spacing-wider);
  opacity: 0.62;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.projects-view__external-link[hidden] {
  display: none;
}

.projects-view__external-link svg {
  display: block;
  width: 1.3rem;
  height: 1.3rem;
  flex: 0 0 auto;
  color: var(--color-foreground);
}

.projects-view__external-link-background {
  fill: transparent;
  transition: fill var(--duration-fast) var(--ease-standard);
}

.projects-view__external-link-outline,
.projects-view__external-link-arrow {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.projects-view__external-link-arrow {
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.projects-view__external-link:hover,
.projects-view__external-link:focus-visible {
  opacity: 1;
}

.projects-view__external-link:hover svg,
.projects-view__external-link:focus-visible svg {
  color: var(--color-background);
}

.projects-view__external-link:hover .projects-view__external-link-background,
.projects-view__external-link:focus-visible .projects-view__external-link-background {
  fill: var(--color-foreground);
}

.projects-view__external-link:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.35rem;
}

.projects-view__metadata {
  width: min(47rem, 83%);
  margin-top: 1.35rem;
}

.projects-view__status,
.projects-view__category {
  font-size: clamp(0.625rem, 0.72vw, 0.75rem);
  line-height: 1.75;
}

.projects-view__metadata > span {
  display: block;
  width: 100%;
  margin: 0.85rem 0 0.9rem;
  border-top: var(--border-thin);
}

.projects-view__description {
  max-width: 47rem;
  font-size: clamp(0.55rem, 0.62vw, 0.6875rem);
  line-height: 1.6;
}

.projects-view__preview {
  margin-top: clamp(1.25rem, 2.5vh, 2.5rem);
  color: inherit;
  opacity: 0.34;
  transition:
    opacity 500ms var(--ease-standard),
    transform 650ms var(--ease-expressive);
}

.projects-view__preview:hover,
.projects-view__preview:focus-visible {
  opacity: 0.72;
}

.projects-view__preview:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.5rem;
}

.projects-view__preview .projects-view__dash {
  margin-top: 3.05rem;
  border-top-width: 1px;
}

.projects-view__preview-content {
  padding: 0 0 0.8rem clamp(1.5rem, 2.25vw, 2.5rem);
}

.projects-view__preview-number {
  display: block;
  margin-bottom: 0.45rem;
  font-size: clamp(0.75rem, 1vw, 1rem);
}

.projects-view__preview strong {
  display: block;
  overflow: hidden;
  max-width: 100%;
  font-family: var(--font-interface);
  font-size: clamp(2.4rem, 4.4vw, 4.6rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.025em;
  white-space: nowrap;
}

.projects-view__preview-status {
  display: block;
  margin-top: 0.9rem;
  font-size: clamp(0.55rem, 0.62vw, 0.6875rem);
}

.projects-view__rail {
  position: absolute;
  top: 18%;
  right: clamp(2rem, 5vw, 5.5rem);
  bottom: 12%;
  z-index: 3;
  width: 5.5rem;
}

.projects-view__rail-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.35rem;
  border-left: var(--border-thin);
}

.projects-view__rail ol {
  position: absolute;
  top: 20%;
  right: 0;
  left: 0;
  display: grid;
  gap: clamp(1.75rem, 4.5vh, 3rem);
}

.projects-view__rail button {
  display: grid;
  grid-template-columns: 0.75rem 1fr;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: 1.5rem;
  text-align: left;
}

.projects-view__rail-marker {
  display: block;
  width: 0.7rem;
  height: 0.7rem;
  border: 1px solid currentColor;
  background: var(--color-background);
  transition: background 350ms var(--ease-standard);
}

.projects-view__rail button.is-active .projects-view__rail-marker {
  background: currentColor;
}

.projects-view__rail-label {
  font-size: 0.625rem;
}

.projects-view__rail button:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.35rem;
}

.projects-view.is-switching .projects-view__active-content {
  opacity: 0;
  transform: translateY(-0.6rem);
}

.projects-view.is-switching .projects-view__preview {
  opacity: 0;
  transform: translateY(0.6rem);
}

.theme-stage.is-theme-visible .projects-view__kicker {
  opacity: 1;
  transform: translateY(0);
}

.theme-stage.is-theme-visible .projects-view__active {
  animation: projects-register-in 850ms var(--ease-expressive) 120ms both;
}

.theme-stage.is-theme-visible .projects-view__preview {
  animation: projects-register-in 950ms var(--ease-expressive) 220ms both;
}

.theme-stage.is-theme-visible .projects-view__rail {
  animation: projects-rail-in 800ms var(--ease-standard) 280ms both;
}

html[data-active-theme="projects"] .theme-stage__close,
html.is-theme-closing[data-closing-theme="projects"] .theme-stage__close {
  top: auto;
  right: auto;
  bottom: max(1.75rem, calc(env(safe-area-inset-bottom) + 0.75rem));
  left: calc(50% - 1rem);
  transform: rotate(0deg);
}

html[data-active-theme="projects"] .theme-stage__close:hover,
html[data-active-theme="projects"] .theme-stage__close:focus-visible {
  transform: rotate(90deg);
}

@keyframes projects-register-in {
  from { opacity: 0; transform: translateX(-1.25rem); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes projects-rail-in {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1180px) {
  .projects-view__register {
    left: clamp(5rem, 9vw, 8rem);
    width: 72vw;
  }

  .projects-view__active h2 {
    font-size: clamp(3.8rem, 8.8vw, 6.8rem);
  }

  .projects-view[data-active-project="yam-yam-sushi"] .projects-view__active h2 {
    font-size: clamp(2.7rem, 5.6vw, 4.5rem);
  }

  .projects-view[data-active-project="yamu-maru-crew"] .projects-view__active h2 {
    font-size: clamp(2.6rem, 5.3vw, 4.3rem);
  }

  .projects-view__rail {
    right: 1.5rem;
  }
}


/*
 * CONTACT — DIRECT CONNECTION
 */

.contact-view {
  overflow: hidden;
  color: var(--color-foreground);
  background: var(--color-background);
}

.contact-view__kicker {
  position: absolute;
  top: calc(18vh + 1rem);
  left: var(--page-padding-horizontal);
  font-family: var(--font-mono);
  font-size: clamp(0.625rem, 0.68vw, 0.75rem);
  letter-spacing: var(--letter-spacing-wider);
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 650ms var(--ease-standard) 100ms,
    transform 850ms var(--ease-expressive) 100ms;
}

.contact-view__statement {
  position: absolute;
  top: 29%;
  left: 10vw;
  width: 45vw;
}

.contact-view__statement h2 {
  font-family: var(--font-interface);
  font-size: clamp(4.5rem, 8vw, 9rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.045em;
}

html[data-locale="de"] .contact-view__statement h2 {
  font-size: clamp(3.8rem, 6.5vw, 7rem);
  letter-spacing: -0.04em;
}

html[data-locale="vi"] .contact-view__statement h2 {
  max-width: 45vw;
  font-size: clamp(3.25rem, 5vw, 5.75rem);
  line-height: 0.94;
  letter-spacing: -0.035em;
}

.contact-view__lines {
  display: grid;
  gap: 0.35rem;
  margin-top: clamp(2rem, 4vh, 3.5rem);
  padding-top: 1.2rem;
  border-top: var(--border-thin);
  font-family: var(--font-mono);
  font-size: clamp(0.7rem, 0.9vw, 0.95rem);
  line-height: 1.6;
  letter-spacing: var(--letter-spacing-wider);
}

.contact-view__lines span { display: block; }

.contact-view__intro {
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: clamp(0.55rem, 0.62vw, 0.6875rem);
  letter-spacing: var(--letter-spacing-wider);
  opacity: 0.48;
}

.contact-view__channels {
  position: absolute;
  top: 47%;
  right: 8vw;
  z-index: 3;
  display: grid;
  width: 34vw;
  padding: 0 0.85rem;
  border-top: var(--border-thin);
  background: var(--color-background);
  font-style: normal;
}

.contact-view__channels > div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1rem;
  padding: 0.62rem 0;
  border-bottom: var(--border-thin);
  background: var(--color-background);
  font-family: var(--font-mono);
  font-size: clamp(0.6rem, 0.7vw, 0.75rem);
  letter-spacing: var(--letter-spacing-wider);
}

.contact-view__channels > div > span:first-child { opacity: 0.38; }

.contact-view__channels a,
.contact-view__channels button {
  color: inherit;
  text-align: left;
  transition: letter-spacing 400ms var(--ease-standard), opacity 400ms var(--ease-standard);
}

.contact-view__channels a:hover,
.contact-view__channels a:focus-visible,
.contact-view__channels button:hover,
.contact-view__channels button:focus-visible {
  letter-spacing: 0.22em;
  opacity: 0.55;
}

.contact-view__channels a:focus-visible,
.contact-view__channels button:focus-visible { outline: 1px solid currentColor; }
.contact-view__channels .is-pending { opacity: 0.28; }

.contact-view__qr {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--color-background) 92%, transparent);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 420ms var(--ease-standard), visibility 0s linear 420ms;
}
.contact-view__qr.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.contact-view__qr-panel { position: relative; width: min(32rem, 72vw); padding: 2.25rem 2.5rem 2rem; border: var(--border-thin); background: var(--color-background); text-align: center; }
.contact-view__qr-eyebrow,
.contact-view__qr-hint { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: var(--letter-spacing-wider); }
.contact-view__qr-panel h3 { margin-top: 0.75rem; font-family: var(--font-interface); font-size: clamp(1.4rem, 2.2vw, 2.1rem); font-weight: 300; letter-spacing: 0.02em; }
.contact-view__qr-panel img { display: block; width: min(15rem, 34vh); height: auto; margin: 1.5rem auto; filter: grayscale(1) contrast(1.08); }
.contact-view__qr-hint { opacity: 0.48; }
.contact-view__qr-close { position: relative; width: 2.25rem; height: 2.25rem; margin-top: 1.4rem; transition: transform 500ms var(--ease-expressive); }
.contact-view__qr-close:hover,
.contact-view__qr-close:focus-visible { transform: rotate(90deg); }
.contact-view__qr-close span::before,
.contact-view__qr-close span::after { content: ""; position: absolute; top: 50%; left: 50%; width: 1.6rem; border-top: 1px solid currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.contact-view__qr-close span::after { transform: translate(-50%, -50%) rotate(-45deg); }

.contact-view__axis {
  position: absolute;
  top: 25%;
  right: clamp(2.25rem, 4vw, 4.5rem);
  bottom: 17%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 1.5rem;
  border-left: var(--border-thin);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: var(--letter-spacing-wider);
  writing-mode: vertical-rl;
}

.contact-view__axis li::before {
  content: "";
  display: inline-block;
  width: 0.42rem;
  height: 0.42rem;
  margin-bottom: 0.75rem;
  border: 1px solid currentColor;
  background: var(--color-background);
}

.contact-view__statement,
.contact-view__channels,
.contact-view__axis { opacity: 0; }

.theme-stage.is-theme-visible .contact-view__kicker { opacity: 1; transform: translateY(0); }
.theme-stage.is-theme-visible .contact-view__statement { animation: contact-in 900ms var(--ease-expressive) 120ms both; }
.theme-stage.is-theme-visible .contact-view__channels { animation: contact-in 900ms var(--ease-expressive) 240ms both; }
.theme-stage.is-theme-visible .contact-view__axis { animation: contact-in 800ms var(--ease-standard) 360ms both; }

html[data-active-theme="contact"] .theme-stage__close,
html.is-theme-closing[data-closing-theme="contact"] .theme-stage__close {
  top: auto;
  right: auto;
  bottom: max(1.75rem, calc(env(safe-area-inset-bottom) + 0.75rem));
  left: calc(50% - 1rem);
  transform: rotate(0deg);
}

html[data-active-theme="contact"] .theme-stage__close:hover,
html[data-active-theme="contact"] .theme-stage__close:focus-visible { transform: rotate(90deg); }


/* ==========================================================================
   Global bottom bar
   One persistent control surface for language, close and copyright.
   ========================================================================== */

.bottom-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9997;

  height: 3.5rem;

  color: var(--color-foreground);
  background: rgb(240 238 232 / 94%);
  border-top: var(--border-thin);
  -webkit-backdrop-filter: blur(0.45rem);
  backdrop-filter: blur(0.45rem);

  visibility: hidden;
  opacity: 0;
  transform: translateY(0.5rem);
  transition:
    visibility 0s linear var(--duration-normal),
    opacity var(--duration-normal) var(--ease-standard),
    transform var(--duration-slow) var(--ease-expressive);
}

.soyyo.is-intro-complete .bottom-bar {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

.bottom-bar .language-switcher {
  position: absolute;
  top: 50%;
  bottom: auto;
  left: calc(var(--page-padding-horizontal) + 0.125rem);
  z-index: 1;

  visibility: visible;
  opacity: 1;
  transform: translateY(-50%);
}

.soyyo.is-intro-complete .bottom-bar .language-switcher {
  transform: translateY(-50%);
}

.bottom-bar__close {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 2.75rem;
  height: 2.75rem;

  color: inherit;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition:
    visibility 0s linear var(--duration-normal),
    opacity var(--duration-normal) var(--ease-standard),
    transform 450ms var(--ease-expressive);
}

html[data-active-theme] .bottom-bar__close,
html.is-theme-closing .bottom-bar__close {
  visibility: visible;
  opacity: 0.68;
  pointer-events: auto;
  transition-delay: 0s;
}

.bottom-bar__close:hover,
.bottom-bar__close:focus-visible {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.bottom-bar__close:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.2rem;
}

.bottom-bar__close span,
.bottom-bar__close span::before {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 1.8rem;
  height: 1px;

  content: "";
  background: currentColor;
}

.bottom-bar__close span {
  transform: translate(-50%, -50%) rotate(45deg);
  pointer-events: none;
  transition: transform 450ms var(--ease-expressive);
}

.bottom-bar__close:hover span,
.bottom-bar__close:focus-visible span {
  transform: translate(-50%, -50%) rotate(135deg);
}

.bottom-bar__close span::before {
  transform: translate(-50%, -50%) rotate(90deg);
}

.bottom-bar__copyright {
  position: absolute;
  top: 50%;
  right: var(--page-padding-horizontal);

  margin: 0;

  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: var(--font-weight-light);
  line-height: 1;
  letter-spacing: 0.14em;
  white-space: nowrap;

  opacity: 0.4;
  transform: translateY(-50%);
}

@media (pointer: coarse) {
  .bottom-bar__close:hover span {
    transform: translate(-50%, -50%) rotate(45deg);
  }
}

@keyframes contact-in {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1180px) {
  .contact-view__statement { top: 27%; left: 7vw; width: 45vw; }
  .contact-view__statement h2 { font-size: clamp(3.6rem, 7.4vw, 6rem); }
  html[data-locale="de"] .contact-view__statement h2 { font-size: clamp(3.4rem, 6.7vw, 5.6rem); }
  html[data-locale="vi"] .contact-view__statement h2 { max-width: 45vw; font-size: clamp(2.8rem, 5.3vw, 4.8rem); }
  .contact-view__channels { top: 45%; right: 6vw; width: 37vw; }
  .contact-view__channels > div { grid-template-columns: 5.5rem 1fr; }
  .contact-view__axis { right: 1.75rem; }
}

/* Join the entry dividers to the BottomBar while preserving label positions. */
@media (min-width: 48rem) {
  .theme-menu {
    --menu-bottom-extension: calc(var(--page-padding-vertical) + 45px - 3.5rem);
    padding-bottom: 3.5rem;
  }
  .theme-menu__item {
    height: calc(var(--theme-menu-height) + var(--menu-bottom-extension));
    padding-bottom: calc(.125rem + var(--menu-bottom-extension));
  }
}