:root {
  --page-background: #ffffff;
  --text-color: #111111;
  --mono-font:
    "Courier New",
    Courier,
    "Nimbus Mono PS",
    "Liberation Mono",
    monospace;
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  background: var(--page-background);
  color: var(--text-color);
  font-family: var(--mono-font);
  transition:
    background-color 420ms ease,
    color 420ms ease;
}

a { font: inherit; }

.loader {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #ffffff;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 360ms linear,
    visibility 360ms linear;
}

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

.loader-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 420ms ease,
    visibility 420ms ease;
}

.loader-stage.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Voice choice */
.voice-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  transition:
    opacity 420ms ease,
    transform 420ms ease;
}

.loader-stage--voice.is-leaving .voice-inline {
  opacity: 0;
  transform: translateY(-2px);
}

.voice-label-inline {
  font-size: 11px;
  letter-spacing: .18em;
  opacity: .40;
}

.voice-choice {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  letter-spacing: .06em;
  opacity: .32;
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.voice-choice:hover,
.voice-choice:focus-visible,
.voice-choice.is-selected {
  opacity: 1;
}

.voice-choice:focus-visible {
  outline: 1px dotted currentColor;
  outline-offset: 5px;
}

.voice-choice:active {
  transform: translateY(1px);
}

/* Loading text */
.loader-stage--text {
  font-size: 13px;
  letter-spacing: .04em;
}

.loader-stage--text span {
  display: inline-block;
  min-width: 10.5em;
}

/* Noise */
.loader-stage--noise canvas {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

/* Random numbers */
.loader-stage--numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#randomNumbers {
  width: 100vw;
  overflow: hidden;
}

.number-line {
  width: 100vw;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  color: #111111;
  font-family: var(--mono-font);
  font-size: clamp(7px, 0.62vw, 12px);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: .02em;
  clip-path: inset(0 0 0 0);
  opacity: 1;
  user-select: none;
}

.number-line.wipe-line {
  animation:
    wipe-line-left-to-right
    500ms
    cubic-bezier(.22, .61, .36, 1)
    forwards;
}

@keyframes wipe-line-left-to-right {
  from {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }

  to {
    clip-path: inset(0 0 0 100%);
    opacity: 0;
  }
}

/* Enter */
.loader-stage--enter {
  overflow: hidden;
}

#enterButton {
  position: relative;
  z-index: 2;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: none !important;
  border-radius: 0;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: inherit;
  cursor: grab;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: lowercase;
  user-select: none;
  opacity: 0;
  transition: opacity 520ms ease;
}

.loader-stage--enter.is-active #enterButton {
  opacity: 1;
}

#enterButton:hover,
#enterButton:focus,
#enterButton:focus-visible,
#enterButton:active {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  letter-spacing: 0;
}

#enterButton.dragging {
  cursor: grabbing;
}

#dragNoise {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  overflow: hidden;
  padding: 2vw;
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 10px;
  line-height: 1;
  opacity: .8;
  pointer-events: none;
}

/* v15 Menu */

.site-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px 20px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition:
    opacity 620ms ease,
    transform 620ms ease,
    visibility 620ms ease;
}

body.is-ready {
  overflow: auto;
}

body.is-ready .site-shell {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.index-row {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  width: 100%;
}

.site-title {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}

.main-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
}

.menu-item {
  position: relative;
  display: inline-block;
  padding: 4px 3px;
  color: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: .08em;
  text-decoration: none;
  white-space: nowrap;
  transition:
    opacity 220ms ease,
    letter-spacing 320ms ease,
    transform 320ms ease;
}

.menu-item::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transform: translateX(-50%);
  transition: width 320ms ease;
}

.menu-item:hover,
.menu-item:focus-visible {
  letter-spacing: .15em;
  transform: translateX(2px);
}

.menu-item:hover::after,
.menu-item:focus-visible::after {
  width: 100%;
}

.main-menu:hover .menu-item:not(:hover),
.main-menu:focus-within .menu-item:not(:focus-visible) {
  opacity: 0.28;
}

.menu-item:focus-visible {
  outline: 1px dotted currentColor;
  outline-offset: 6px;
}

.noscript-message {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 40;
  margin: 0;
  transform: translateX(-50%);
  font-size: 0.72rem;
}

@media (max-width: 760px) {
  .index-row {
    flex-direction: column;
    gap: 32px;
  }

  .main-menu {
    flex-wrap: wrap;
    gap: 18px 25px;
    max-width: 420px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loader,
  .site-shell,
  .menu-item {
    transition: none;
  }

  .number-line.wipe-line {
    animation-duration: 1ms;
  }
}


.voice-select{
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:8px;
 margin-bottom:10px;
}
.voice-title{
 font-size:8px;
 letter-spacing:.24em;
 opacity:.35;
 text-transform:lowercase;
}
.voice-options{
 display:flex;
 gap:18px;
}
.voice-choice{
 border:none;
 background:none;
 font:inherit;
 font-size:15px;
 opacity:.35;
 cursor:pointer;
}
.voice-choice.active,
.voice-choice:hover{
 opacity:1;
}
#enterButton{
 letter-spacing:0 !important;
 font-size:11px;
}
#enterButton:hover,
#enterButton:focus-visible{
 letter-spacing:0 !important;
}


.voice-inline{
 display:flex;
 align-items:center;
 gap:18px;
}

.voice-label-inline{
 font-size:11px;
 letter-spacing:.25em;
 opacity:.40;
 text-transform:none;
}

.voice-choice{
 border:none;
 background:none;
 font:inherit;
 font-size:15px;
 cursor:pointer;
 opacity:.35;
 transition:opacity .25s ease;
}

.voice-choice.active,
.voice-choice:hover{
 opacity:1;
}


/* SoulCraft slow-fade preview — definitive overrides */
.voice-label-inline {
  font-size: 11px;
  opacity: .40;
}

.voice-choice {
  font-size: 15px;
}

#enterButton {
  font-size: 11px;
}

#randomNumbers {
  opacity: 1;
  transition: opacity 3000ms linear;
}

#randomNumbers.is-fading-out {
  opacity: 0;
}


/* SoulCraft v3.3 — voice indicator and selection state */
.voice-label-inline {
  display: inline-flex;
  align-items: center;
  gap: .48em;
}

.voice-label-inline::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 5px rgba(17, 17, 17, .48);
  opacity: .9;
  animation: voice-indicator-pulse 1.8s ease-in-out infinite;
}

@keyframes voice-indicator-pulse {
  0%,
  100% {
    opacity: .42;
    box-shadow: 0 0 2px rgba(17, 17, 17, .22);
  }

  50% {
    opacity: 1;
    box-shadow: 0 0 6px rgba(17, 17, 17, .58);
  }
}

.voice-choice {
  position: relative;
}

.voice-choice::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 180ms ease;
}

.voice-choice:hover::after,
.voice-choice:focus-visible::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .voice-label-inline::before {
    animation: none;
  }
}


/* SoulCraft v3.4 — definitive hover interaction */
.voice-label-inline::before {
  width: 6px;
  height: 6px;
}

.voice-choice::after {
  transform: scaleX(0);
}

.voice-choice:hover::after,
.voice-choice:focus-visible::after {
  transform: scaleX(1);
}

.voice-choice.is-selected::after {
  transform: scaleX(0);
}


/* SoulCraft v3.6 — numbers continue moving during the full fade */
#randomNumbers {
  transition: opacity 3000ms cubic-bezier(.72, 0, .95, .62);
}


/* v3.7 INDEX preview */
#indexMenu{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
min-height:100vh;
background:#fff;
}
.site-title{
font:400 20px system-ui,sans-serif;
margin-bottom:64px;
}
.index-nav{
display:flex;
flex-direction:column;
gap:42px;
align-items:center;
}
.index-nav a{
color:#000;
text-decoration:none;
letter-spacing:0;
transition:opacity .25s, letter-spacing .25s;
}
.index-nav:hover a{opacity:.25;}
.index-nav a:hover{
opacity:1 !important;
letter-spacing:.08em;
text-decoration:underline;
}


/* v3.8 : title treated as a menu item */
.site-title{
    font: inherit !important;
    font-size:16px !important;
    font-weight:400 !important;
    margin:0 0 42px 0 !important;
    letter-spacing:0;
    transition:opacity .25s, letter-spacing .25s;
    cursor:pointer;
}

#indexMenu:hover .site-title,
#indexMenu:hover .index-nav a{
    opacity:.25;
}

#indexMenu .site-title:hover,
#indexMenu .index-nav a:hover{
    opacity:1 !important;
    letter-spacing:.08em;
    text-decoration:underline;
}


/* SoulCraft v4.0 — horizontal index / code-oriented typography */
.site-shell .index-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
}

.site-shell .site-title--code,
.site-shell .main-menu .menu-item {
  font-family:
    ui-monospace,
    "SFMono-Regular",
    "SF Mono",
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: .055em;
}

.site-shell .site-title--code {
  margin: 0 86px 0 0 !important;
  padding: 0;
  white-space: nowrap;
}

.site-shell .main-menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 54px;
  white-space: nowrap;
}

/* Keep the original quiet hover behaviour. */
.site-shell .index-row:hover .site-title--code,
.site-shell .index-row:hover .menu-item {
  opacity: .25;
}

.site-shell .site-title--code:hover,
.site-shell .menu-item:hover,
.site-shell .menu-item:focus-visible {
  opacity: 1 !important;
  letter-spacing: .10em;
}

/* Responsive fallback: preserve one horizontal line as long as practical. */
@media (max-width: 820px) {
  .site-shell .index-row {
    transform: scale(.86);
    transform-origin: center;
  }
}

@media (max-width: 650px) {
  .site-shell .index-row {
    transform: scale(.68);
  }
}



/* SoulCraft v5.5 clean rebuild */
.site-shell{position:fixed!important;inset:0!important;display:block!important;min-height:100vh!important;overflow:hidden!important;background:#fff}
#indexRow{position:fixed!important;top:50%!important;left:50%!important;width:max-content!important;display:flex!important;align-items:center!important;transform:translate(-50%,-50%)!important;z-index:20!important}
.site-title--code,.main-menu .menu-item{appearance:none;border:0;padding:0;background:transparent;color:#000;font-family:ui-monospace,"SFMono-Regular","SF Mono",Menlo,Monaco,Consolas,monospace!important;font-size:14px!important;font-weight:400!important;line-height:1!important;letter-spacing:.055em;cursor:pointer}
.site-title--code{margin-right:92px!important}.main-menu{display:flex!important;align-items:center!important;gap:54px!important}
#indexRow:hover .menu-trigger{opacity:.25}.menu-trigger:hover,.menu-trigger:focus-visible,.menu-trigger.is-active{opacity:1!important;letter-spacing:.10em;text-decoration:underline;text-underline-offset:5px}
.content-frame{--fw:min(1180px,92vw);--fh:min(760px,78vh);position:fixed!important;top:50%!important;left:50%!important;width:var(--fw)!important;height:var(--fh)!important;transform:translate(-50%,-50%)!important;box-sizing:border-box!important;visibility:hidden;overflow:hidden;background:#fff;z-index:10}
.content-frame.is-ready{visibility:visible}.content-frame:before{content:"";position:absolute;inset:0;border:1px solid rgba(0,0,0,.18);opacity:0;pointer-events:none;z-index:2}
.content-panel{display:none;position:relative;z-index:5;min-height:100%;box-sizing:border-box;padding:clamp(56px,6vw,96px);opacity:0;transform:translateY(8px)}
.content-panel.is-active{display:block}.content-frame.show-content .content-panel.is-active{animation:contentIn 440ms ease forwards}
.frame-noise,.frame-line,.frame-dot{position:absolute;pointer-events:none;z-index:4}
.frame-noise{inset:0;opacity:0;background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 1px,transparent 1px 4px)}
.frame-line{background:rgba(0,0,0,.34);opacity:0}.frame-line--top,.frame-line--bottom{left:0;width:100%;height:1px;transform:scaleX(0)}.frame-line--top{top:0;transform-origin:left}.frame-line--bottom{bottom:0;transform-origin:right}.frame-line--left,.frame-line--right{top:0;width:1px;height:100%;transform:scaleY(0)}.frame-line--left{left:0;transform-origin:bottom}.frame-line--right{right:0;transform-origin:top}
.frame-dot{left:50%;top:50%;width:4px;height:4px;border:1px solid rgba(0,0,0,.32);border-radius:50%;opacity:0;transform:translate(-50%,-50%)}
.content-frame.fx-archive{left:auto!important;right:4vw!important;width:0!important;transform:translateY(-50%)!important;border:1px solid rgba(0,0,0,.18);transition:width 760ms cubic-bezier(.22,1,.36,1)}.content-frame.fx-archive.run{width:min(1180px,92vw)!important}
.content-frame.fx-sonic.run .frame-line{opacity:1}.content-frame.fx-sonic.run .frame-line--top{animation:xline 260ms linear forwards}.content-frame.fx-sonic.run .frame-line--right{animation:yline 260ms linear 260ms forwards}.content-frame.fx-sonic.run .frame-line--bottom{animation:xline 260ms linear 520ms forwards}.content-frame.fx-sonic.run .frame-line--left{animation:yline 260ms linear 780ms forwards}
.content-frame.fx-journal{opacity:0;transform:translate(-50%,-50%) scale(.88)!important;border:1px solid rgba(0,0,0,.18);transition:opacity 700ms ease,transform 700ms cubic-bezier(.22,1,.36,1)}.content-frame.fx-journal.run{opacity:1;transform:translate(-50%,-50%) scale(1)!important}
.content-frame.fx-contact.run .frame-dot{animation:dotFrame 900ms cubic-bezier(.22,1,.36,1) forwards}.content-frame.fx-contact.run:before{animation:borderIn 180ms ease 820ms forwards}
.content-frame.fx-about.run .frame-noise{animation:noiseFrame 860ms steps(8,end) forwards}.content-frame.fx-about.run:before{animation:borderIn 220ms ease 700ms forwards}
@keyframes xline{to{transform:scaleX(1)}}@keyframes yline{to{transform:scaleY(1)}}@keyframes borderIn{to{opacity:1}}@keyframes contentIn{to{opacity:1;transform:translateY(0)}}@keyframes noiseFrame{0%{opacity:0}20%{opacity:.22}45%{opacity:.38}70%{opacity:.15}100%{opacity:0}}@keyframes dotFrame{0%{opacity:1;width:4px;height:4px;border-radius:50%}35%{opacity:1;border-radius:0}100%{opacity:1;width:100%;height:100%;border-radius:0}}


/* SoulCraft v7.0 — fullscreen INDEX refinement */
/* INDEX typography: smaller, while leaving the completed intro sequence untouched. */
.site-title--code,
.main-menu .menu-item {
  font-size: 12px !important;
  transition: opacity 220ms ease, transform 220ms ease;
  transform-origin: center;
}

/* Hover expansion must not alter layout width; this prevents the first-click shift. */
.menu-trigger:hover,
.menu-trigger:focus-visible {
  letter-spacing: .055em !important;
  transform: scaleX(1.045);
}

.menu-trigger.is-active {
  letter-spacing: .055em !important;
  transform: none;
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* Borderless content presentation. */
.content-frame,
.content-frame.fx-about,
.content-frame.fx-archive,
.content-frame.fx-journal {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.content-frame::before,
.frame-line,
.frame-dot {
  display: none !important;
}

.content-panel {
  padding: clamp(48px, 5vw, 82px);
  font-size: 12px;
}

.content-panel h1 {
  font-size: clamp(20px, 2.2vw, 34px);
}

.content-kicker {
  font-size: 10px;
}


/* SoulCraft v7.1 — exact first-click position lock and reduced INDEX scale */

/* Keep every menu state at exactly the same typographic width. */
.site-title--code,
.main-menu .menu-item {
  font-size: 10px !important;
  line-height: 1 !important;
  letter-spacing: .045em !important;
  transform: none !important;
  transition:
    opacity 220ms ease,
    text-decoration-color 220ms ease !important;
}

/* Hover/active feedback without scale or tracking changes. */
.menu-trigger:hover,
.menu-trigger:focus-visible,
.menu-trigger.is-active {
  letter-spacing: .045em !important;
  transform: none !important;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* Slightly tighter horizontal rhythm for the smaller type. */
.site-shell .site-title--code {
  margin-right: 76px !important;
}

.site-shell .main-menu {
  gap: 44px !important;
}

/* Content typography reduced in the same proportion. */
.content-panel {
  font-size: 10px !important;
  line-height: 1.65;
}

.content-panel h1 {
  font-size: clamp(17px, 1.8vw, 27px) !important;
  font-weight: 400;
}

.content-kicker {
  font-size: 8px !important;
}


/* SoulCraft v7.2 — stable menu landing / smaller menu / single number row */

/* Only the INDEX menu becomes smaller. Content typography is unchanged. */
.site-shell .site-title--code,
.site-shell .main-menu .menu-item {
  font-size: 8px !important;
  line-height: 1 !important;
  letter-spacing: .04em !important;
}

.site-shell .site-title--code {
  margin-right: 66px !important;
}

.site-shell .main-menu {
  gap: 38px !important;
}

/* One uninterrupted random-number row across the viewport. */
.loader-stage--numbers {
  overflow: hidden !important;
}

#randomNumbers {
  width: 100vw !important;
  height: auto !important;
  display: block !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

#randomNumbers .number-line {
  display: block !important;
  width: max-content !important;
  min-width: 100vw !important;
  margin: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}


/* SoulCraft v7.4 — separated centering and motion layers */

/*
 * #indexRow is the immutable centering anchor.
 * It is never animated and its translate(-50%, -50%) is never replaced.
 */
#indexRow {
  top: 50% !important;
  left: 50% !important;
  width: max-content !important;
  transform: translate(-50%, -50%) !important;
}

/*
 * Only this inner layer moves vertically after the first menu click.
 * Horizontal centering is therefore structurally impossible to lose.
 */
#indexMotion {
  display: flex;
  align-items: center;
  width: max-content;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* Transfer the row spacing from the fixed anchor to the motion layer. */
#indexRow {
  gap: 0 !important;
}

#indexMotion .site-title--code {
  margin-right: 66px !important;
}

#indexMotion .main-menu {
  display: flex !important;
  align-items: center !important;
  gap: 38px !important;
}


/* SoulCraft v7.5 browser preview — stable menu swap and compact content */
#indexRow {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  width: max-content !important;
  min-height: 0 !important;
  transform: translate(-50%, -50%) !important;
  opacity: 1;
  visibility: visible;
  transition: opacity 520ms ease, visibility 520ms ease !important;
  z-index: 12;
}

#indexRow.is-leaving {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}

#indexMotion {
  transform: none !important;
}

.fixed-index-menu {
  position: fixed;
  left: 50%;
  bottom: 8.5vh;
  z-index: 30;
  display: flex;
  align-items: center;
  width: max-content;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 520ms ease, visibility 520ms ease;
}

.fixed-index-menu.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.fixed-index-menu .site-title--code,
.fixed-index-menu .menu-item {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font-family: ui-monospace,"SFMono-Regular","SF Mono",Menlo,Monaco,Consolas,monospace !important;
  font-size: 8px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: .04em !important;
  cursor: pointer;
  white-space: nowrap;
}

.fixed-index-menu .site-title--code {
  margin: 0 66px 0 0 !important;
}

.fixed-index-menu .main-menu {
  display: flex !important;
  align-items: center !important;
  gap: 38px !important;
}

.fixed-index-menu:hover .fixed-menu-trigger {
  opacity: .25;
}

.fixed-index-menu .fixed-menu-trigger:hover,
.fixed-index-menu .fixed-menu-trigger:focus-visible,
.fixed-index-menu .fixed-menu-trigger.is-active {
  opacity: 1 !important;
  text-decoration: underline;
  text-underline-offset: 4px;
  transform: none !important;
  letter-spacing: .04em !important;
}

.content-frame,
.content-frame.fx-about,
.content-frame.fx-archive,
.content-frame.fx-journal {
  position: fixed !important;
  top: 34% !important;
  left: 18% !important;
  right: auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  transform: none !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  visibility: hidden;
  z-index: 10;
}

.content-frame.is-ready {
  visibility: visible !important;
}

.content-frame::before,
.frame-noise,
.frame-line,
.frame-dot {
  display: none !important;
}

.content-panel {
  display: none;
  min-height: 0 !important;
  padding: 0 !important;
  opacity: 0;
  transform: translateY(3px);
}

.content-panel.is-active {
  display: block;
}

.content-frame.show-content .content-panel.is-active {
  animation: compactContentIn 380ms ease forwards !important;
}

@keyframes compactContentIn {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

.content-kicker {
  margin: 0 0 14px !important;
  font-size: 7px !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
}

.content-panel h1 {
  margin: 0 0 3px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
}

.content-panel p:not(.content-kicker) {
  margin: 0 !important;
  font-size: 8px !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
}

@media (max-width: 760px) {
  .content-frame,
  .content-frame.fx-about,
  .content-frame.fx-archive,
  .content-frame.fx-journal {
    top: 31% !important;
    left: 9% !important;
    max-width: 82vw;
  }

  .fixed-index-menu {
    bottom: 7vh;
    transform: translateX(-50%) scale(.88);
  }

  .fixed-index-menu .site-title--code {
    margin-right: 30px !important;
  }

  .fixed-index-menu .main-menu {
    gap: 19px !important;
  }
}


/* SoulCraft v7.6 — upper content / left-aligned fixed menu */

/*
 * Content is moved into the upper-left area to create a large,
 * uninterrupted field of white space through the centre.
 */
.content-frame,
.content-frame.fx-about,
.content-frame.fx-archive,
.content-frame.fx-journal {
  top: 9vh !important;
  left: 14% !important;
}

/*
 * The post-click menu uses the same left edge as the content.
 * It is no longer centred and therefore does not use translateX.
 */
.fixed-index-menu {
  left: 14% !important;
  right: auto !important;
  transform: none !important;
}

/* Keep the compact vertical typography established in v7.5. */
.content-kicker {
  margin-bottom: 14px !important;
}

.content-panel h1 {
  margin-bottom: 2px !important;
  font-size: 13px !important;
}

.content-panel p:not(.content-kicker) {
  line-height: 1 !important;
}

@media (max-width: 760px) {
  .content-frame,
  .content-frame.fx-about,
  .content-frame.fx-archive,
  .content-frame.fx-journal {
    top: 9vh !important;
    left: 8% !important;
  }

  .fixed-index-menu {
    left: 8% !important;
    transform: scale(.88) !important;
    transform-origin: left center !important;
  }
}


/* SoulCraft v7.7 — tighter menu rhythm and copyright */

/* Initial INDEX: retain hierarchy, but reduce the horizontal gaps. */
#indexMotion .site-title--code {
  margin-right: 42px !important;
}

#indexMotion .main-menu {
  gap: 24px !important;
}

/* Post-click fixed menu: compact and aligned to the content edge. */
.fixed-index-menu .site-title--code {
  margin-right: 42px !important;
}

.fixed-index-menu .main-menu {
  gap: 24px !important;
}

/* Quiet copyright line, sharing the same left edge as content and menu. */
.site-copyright {
  position: fixed;
  left: 14%;
  bottom: 3.2vh;
  z-index: 12;
  margin: 0;
  color: #000;
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-size: 6px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .025em;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 360ms ease;
  pointer-events: none;
}

body.is-ready .site-copyright {
  visibility: visible;
}

.fixed-index-menu.is-visible ~ .site-copyright,
.site-copyright.is-visible {
  opacity: .42;
}

@media (max-width: 760px) {
  #indexMotion .site-title--code,
  .fixed-index-menu .site-title--code {
    margin-right: 24px !important;
  }

  #indexMotion .main-menu,
  .fixed-index-menu .main-menu {
    gap: 14px !important;
  }

  .site-copyright {
    left: 8%;
    bottom: 2.5vh;
    font-size: 5.5px;
  }
}

/* SoulCraft v7.8 — Archive: quiet index -> visual gallery */
.archive-panel { width: min(960px, 72vw); }
.archive-description { margin-top: 8px !important; opacity: .58; }
.archive-categories {
  display: flex;
  gap: 28px;
  margin-top: 34px;
}
.archive-category,
.archive-back {
  appearance: none;
  border: 0;
  padding: 0 0 3px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-family: ui-monospace,"SFMono-Regular","SF Mono",Menlo,Monaco,Consolas,monospace;
  font-size: 8px;
  letter-spacing: .04em;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.archive-category:hover,
.archive-category:focus-visible,
.archive-back:hover,
.archive-back:focus-visible { border-bottom-color: currentColor; }
.archive-intro,
.archive-gallery { transition: opacity 300ms ease, transform 300ms ease; }
.archive-intro.is-hidden { display: none; }
.archive-gallery { display: none; opacity: 0; transform: translateY(3px); }
.archive-gallery.is-visible { display: block; animation: archiveIn 380ms ease forwards; }
@keyframes archiveIn { to { opacity: 1; transform: translateY(0); } }
.archive-gallery-head {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 28px;
}
.archive-gallery-head span { font-size: 7px; opacity: .4; }
.archive-gallery-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
}
.work-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  gap: 28px 18px;
  width: min(860px, 70vw);
}
.work-card { min-width: 0; }
.work-thumb {
  aspect-ratio: 1.25 / 1;
  width: 100%;
  overflow: hidden;
  background: #111;
  position: relative;
}
.work-thumb::before,
.work-thumb::after { content:""; position:absolute; inset:0; }
.work-thumb.pattern-lines::before { background: repeating-linear-gradient(0deg,rgba(255,255,255,.28) 0 1px,transparent 1px 5px); transform: skewY(-5deg) scale(1.2); }
.work-thumb.pattern-field::before { background: radial-gradient(circle at 50% 50%,rgba(255,255,255,.75),transparent 4%,rgba(255,255,255,.14) 18%,transparent 42%); filter: blur(3px); }
.work-thumb.pattern-space::before { background: linear-gradient(35deg,transparent 20%,rgba(255,255,255,.22) 50%,transparent 70%),linear-gradient(130deg,transparent 20%,rgba(255,255,255,.12) 50%,transparent 70%); }
.work-thumb.pattern-dot::before { background: radial-gradient(circle at 52% 48%,#fff 0 1%,rgba(255,255,255,.5) 3%,rgba(255,255,255,.08) 13%,transparent 30%); }
.work-title { margin-top: 8px; font-size: 7px; line-height: 1.25; }
.work-year { margin-top: 3px; font-size: 6px; opacity: .48; }
@media (max-width:760px){
  .archive-panel{width:84vw}
  .archive-categories{gap:16px;flex-wrap:wrap}
  .work-grid{grid-template-columns:repeat(2,minmax(90px,1fr));width:84vw;gap:22px 12px}
}


/* SoulCraft v7.9 — Archive transitions, menu pulse, Life organic section */

/* Keep all non-Life sections on the established white system. */
.content-frame {
  overflow: hidden;
}

.content-panel {
  transition:
    opacity 400ms ease,
    transform 400ms cubic-bezier(.22,.61,.36,1);
}

/* Archive: a slow, restrained return to the category index. */
.archive-intro,
.archive-gallery {
  transition:
    opacity 380ms ease,
    transform 380ms cubic-bezier(.22,.61,.36,1),
    visibility 380ms ease;
}

.archive-intro.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3px);
  pointer-events: none;
}

.archive-gallery {
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  pointer-events: none;
}

.archive-gallery.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.archive-gallery.is-returning {
  opacity: 0;
  transform: translateY(5px);
}

/* Brief micro-glitch used for menu clicks. */
.menu-trigger.is-click-glitch,
.fixed-menu-trigger.is-click-glitch {
  animation: menu-click-glitch 180ms steps(2, end);
}

@keyframes menu-click-glitch {
  0%   { opacity: 1; transform: translate(0,0); filter: none; }
  24%  { opacity: .35; transform: translate(-1px,0); filter: contrast(1.8); }
  52%  { opacity: .9; transform: translate(1px,-1px); letter-spacing: .16em; }
  76%  { opacity: .45; transform: translate(0,1px); }
  100% { opacity: 1; transform: translate(0,0); filter: none; }
}

.menu-action-noise {
  position: fixed;
  inset: 0;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  background-image:
    repeating-radial-gradient(circle at 30% 40%, rgba(0,0,0,.13) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 1px, transparent 1px 4px);
  background-size: 5px 5px, 7px 7px;
}

.menu-action-noise.is-active {
  animation: menu-noise-pulse 180ms steps(3, end);
}

@keyframes menu-noise-pulse {
  0%   { opacity: 0; transform: translateX(0); }
  25%  { opacity: .16; transform: translateX(-2px); }
  58%  { opacity: .08; transform: translateX(2px); }
  100% { opacity: 0; transform: translateX(0); }
}

/* Life is deliberately the only full-image, organic section. */
body.is-life-mode {
  background: #d8d0c3;
  color: #17150f;
}

.content-frame.is-life {
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  border: 0;
  background:
    linear-gradient(90deg, rgba(248,243,234,.9) 0%, rgba(248,243,234,.62) 36%, rgba(248,243,234,.12) 72%),
    url("../assets/life-organic-placeholder.svg") center / cover no-repeat;
  transition:
    opacity 420ms ease,
    background 700ms ease;
}

.content-frame.is-life .frame-noise,
.content-frame.is-life .frame-line,
.content-frame.is-life .frame-dot {
  display: none;
}

.content-frame.is-life .content-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.life-panel {
  overflow: hidden;
  color: #17150f;
}

.life-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .17;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' seed='8'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.life-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 72% 26%, rgba(255,252,242,.32), transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(50,42,30,.08));
  pointer-events: none;
}

.life-content {
  position: relative;
  z-index: 2;
  width: min(430px, 42vw);
  margin-left: 14%;
  padding-top: 18vh;
}

.life-content .content-kicker {
  opacity: .58;
}

.life-content h1 {
  margin: 0 0 14px;
  font-size: clamp(26px, 3vw, 48px);
  font-weight: 400;
  letter-spacing: .16em;
}

.life-copy {
  margin: 0 0 84px;
  font-size: 10px;
  line-height: 2;
  letter-spacing: .055em;
}

.life-links {
  display: grid;
  gap: 22px;
  width: min(300px, 100%);
}

.life-link {
  appearance: none;
  display: grid;
  justify-items: start;
  gap: 5px;
  padding: 0 0 10px;
  border: 0;
  border-bottom: 1px solid rgba(23,21,15,.24);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 420ms ease,
    border-color 420ms ease,
    opacity 420ms ease;
}

.life-link:hover,
.life-link:focus-visible {
  transform: translateX(4px);
  border-color: rgba(23,21,15,.7);
  outline: none;
}

.life-link-title {
  font-size: 15px;
  letter-spacing: .13em;
}

.life-link-note {
  font-size: 8px;
  letter-spacing: .05em;
  opacity: .6;
}

.life-preview-note {
  position: absolute;
  right: 3.5vw;
  bottom: 3vh;
  z-index: 2;
  font-size: 7px;
  letter-spacing: .05em;
  opacity: .48;
}

body.is-life-mode .fixed-index-menu {
  color: #17150f;
}

body.is-life-mode .site-copyright {
  color: #17150f;
  opacity: .5;
}

@media (max-width: 760px) {
  .content-frame.is-life {
    background:
      linear-gradient(180deg, rgba(248,243,234,.86) 0%, rgba(248,243,234,.45) 52%, rgba(248,243,234,.08) 100%),
      url("../assets/life-organic-placeholder.svg") 62% center / cover no-repeat;
  }

  .life-content {
    width: 78vw;
    margin-left: 8%;
    padding-top: 19vh;
  }

  .life-content h1 {
    font-size: 28px;
  }

  .life-preview-note {
    display: none;
  }
}


/* SoulCraft v7.9.1 — correction layer */

/* Archive state switching must override earlier prototype display rules. */
.archive-intro {
  display: block !important;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.archive-intro.is-hidden {
  display: block !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-4px) !important;
  pointer-events: none !important;
}

.archive-gallery {
  display: block !important;
  position: absolute;
  inset: clamp(56px, 6vw, 96px);
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(5px) !important;
  pointer-events: none !important;
}

.archive-gallery.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  animation: none !important;
}

.archive-gallery.is-returning {
  opacity: 0 !important;
  visibility: visible !important;
  transform: translateY(5px) !important;
  pointer-events: none !important;
}

/* Life must override the original fixed centered frame rules. */
.content-frame.is-life {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  transform: none !important;
  border: 0 !important;
  overflow: hidden !important;
  visibility: visible !important;
}

.content-frame.is-life::before {
  display: none !important;
}

.content-frame.is-life .content-panel.is-active {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  padding: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.content-frame.is-life .life-panel {
  background: transparent !important;
}

.content-frame.is-life .life-content {
  position: relative;
  z-index: 3;
}

body.is-life-mode .fixed-index-menu {
  z-index: 70 !important;
}

body.is-life-mode .site-copyright {
  z-index: 70 !important;
}


/* SoulCraft v8.0 — Life entrance sequence */

.content-frame.is-life {
  background:
    linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.84) 27%, rgba(255,255,255,.24) 57%, rgba(255,255,255,.02) 100%),
    url("../assets/life-background.png") center center / cover no-repeat !important;
}

/* Life enters as a place, not as a normal section switch. */
body.is-life-entering .content-frame.is-life {
  animation: life-shell-enter 1100ms cubic-bezier(.22,.61,.36,1) both;
}

body.is-life-entering .content-frame.is-life .life-overlay {
  animation: life-light-enter 1100ms ease-in-out both;
}

body.is-life-entering .content-frame.is-life .life-content h1,
body.is-life-entering .content-frame.is-life .life-hub-link,
body.is-life-entering .content-frame.is-life .life-copy,
body.is-life-entering .content-frame.is-life .life-link {
  opacity: 0;
  transform: translateX(-8px);
}

body.is-life-entering .content-frame.is-life .life-content h1 {
  animation: life-copy-enter 720ms 250ms cubic-bezier(.22,.61,.36,1) forwards;
}

body.is-life-entering .content-frame.is-life .life-copy {
  animation: life-copy-enter 720ms 360ms cubic-bezier(.22,.61,.36,1) forwards;
}

body.is-life-entering .content-frame.is-life .life-hub-link {
  animation:life-copy-enter 720ms 430ms cubic-bezier(.22,.61,.36,1) forwards;
}

body.is-life-entering .content-frame.is-life .life-link:nth-child(1) {
  animation: life-copy-enter 680ms 520ms cubic-bezier(.22,.61,.36,1) forwards;
}

body.is-life-entering .content-frame.is-life .life-link:nth-child(2) {
  animation: life-copy-enter 680ms 620ms cubic-bezier(.22,.61,.36,1) forwards;
}

body.is-life-entering .content-frame.is-life .life-link:nth-child(3) {
  animation: life-copy-enter 680ms 720ms cubic-bezier(.22,.61,.36,1) forwards;
}

body.is-life-entering .fixed-index-menu,
body.is-life-entering .site-copyright {
  animation: life-nav-enter 760ms 420ms ease forwards;
}

@keyframes life-shell-enter {
  0% {
    opacity: 0;
    filter: brightness(1.15) saturate(.72);
    background-size: 103% auto;
  }
  42% {
    opacity: .78;
  }
  100% {
    opacity: 1;
    filter: brightness(1) saturate(.9);
    background-size: 100% auto;
  }
}

@keyframes life-light-enter {
  0% {
    opacity: .9;
    background:
      radial-gradient(circle at 72% 26%, rgba(255,255,255,.78), transparent 44%),
      linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.08));
  }
  100% {
    opacity: 1;
    background:
      radial-gradient(circle at 72% 26%, rgba(255,252,242,.32), transparent 35%),
      linear-gradient(180deg, rgba(255,255,255,.08), rgba(50,42,30,.08));
  }
}

@keyframes life-copy-enter {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes life-nav-enter {
  from { opacity: .35; }
  to { opacity: 1; }
}

/* Leaving Life is intentionally slower and softer than other sections. */
body.is-life-leaving .content-frame.is-life {
  animation: life-shell-leave 620ms ease-in-out both;
}

@keyframes life-shell-leave {
  from {
    opacity: 1;
    filter: brightness(1);
  }
  to {
    opacity: 0;
    filter: brightness(1.08);
  }
}

@media (max-width: 760px) {
  .content-frame.is-life {
    background:
      linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.65) 42%, rgba(255,255,255,.16) 100%),
      url("../assets/life-background.png") 68% center / cover no-repeat !important;
  }

  @keyframes life-shell-enter {
    0% {
      opacity: 0;
      filter: brightness(1.15) saturate(.75);
      background-size: auto 104%;
    }
    100% {
      opacity: 1;
      filter: brightness(1) saturate(.9);
      background-size: auto 100%;
    }
  }
}

/* SoulCraft v9.0 — Archive top page only */
.archive-work-list {
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.archive-work-item {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-family: ui-monospace,"SFMono-Regular","SF Mono",Menlo,Monaco,Consolas,monospace;
  font-size: 8px;
  line-height: 1.6;
  letter-spacing: .04em;
}

.archive-work-year,
.archive-work-separator {
  opacity: .48;
}

/* Life language control — v11 Master */
.life-language-control {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 26px;
  font-size: 8px;
  line-height: 1;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.life-language-label,
.life-language-separator {
  opacity: .54;
}

.life-language-toggle {
  position: relative;
  appearance: none;
  padding: 0 0 4px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.life-language-toggle::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right 320ms ease;
}

.life-language-toggle:hover::after,
.life-language-toggle:focus-visible::after {
  right: 0;
}

.life-language-toggle:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 5px;
}

/* Experience r8 — explicit Life return route */
.content-frame.is-life .life-hub-link {
  appearance:none;
  display:block;
  margin:clamp(22px,2.8vh,34px) 0 clamp(24px,3.4vh,42px);
  padding:0 0 5px;
  border:0;
  border-bottom:1px solid rgba(35,32,25,.30);
  background:transparent;
  color:rgba(35,32,25,.68);
  font:9px/1.5 Monaco,Menlo,"SFMono-Regular",Consolas,monospace;
  letter-spacing:.07em;
  cursor:pointer;
  transition:color 220ms ease,border-color 220ms ease,letter-spacing 220ms ease;
}
.content-frame.is-life .life-hub-link:hover,
.content-frame.is-life .life-hub-link:focus-visible {
  color:#17150f;
  border-bottom-color:#17150f;
  letter-spacing:.11em;
  outline:none;
}

.life-lang-ja {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", sans-serif;
  letter-spacing: .075em;
}

@media (max-height: 760px) and (min-width: 761px) {
  .life-language-control {
    margin-bottom: 18px;
  }
}


/* Life interactive drawer preview */
.life-drawer {
  position: absolute;
  z-index: 5;
  top: 8vh;
  left: 20%;
  right: 4vw;
  bottom: 9vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 34px 38px 22px;
  border: 1px solid rgba(23,21,15,.18);
  background: rgba(250,248,242,.43);
  box-shadow: 0 10px 28px rgba(32,28,19,.08);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-34px);
  pointer-events: none;
  transition: opacity 480ms ease, transform 620ms cubic-bezier(.22,.61,.36,1), visibility 0s linear 620ms;
}
.life-drawer.is-open { opacity:1; visibility:visible; transform:translateX(0); pointer-events:auto; transition-delay:0s; }
.life-drawer-head, .life-drawer-foot { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.life-drawer-head { padding-bottom:20px; border-bottom:1px solid rgba(23,21,15,.22); }
.life-drawer-foot { padding-top:18px; border-top:1px solid rgba(23,21,15,.22); justify-content:flex-end; }
.life-drawer-title { margin:0 0 8px; font-size:15px; letter-spacing:.15em; }
.life-drawer-subtitle { margin:0; font-size:9px; opacity:.66; letter-spacing:.08em; }
.life-drawer-close, .life-view-link { appearance:none; border:0; background:transparent; color:inherit; font:inherit; cursor:pointer; letter-spacing:.1em; }
.life-drawer-close { font-size:9px; }
.life-drawer-body { overflow:auto; padding:22px 0; display:grid; align-content:start; gap:16px; }
.life-drawer-item { display:grid; grid-template-columns:122px minmax(180px,320px); gap:22px; align-items:center; }
.life-drawer-item h2 { margin:0 0 12px; font-size:15px; font-weight:400; letter-spacing:.08em; }
.life-drawer-item p { margin:0 0 16px; font-size:9px; line-height:1.8; letter-spacing:.06em; }
.life-view-link { padding:0; font-size:9px; }
.life-drawer-thumb { width:122px; aspect-ratio:1/1; border:1px solid rgba(23,21,15,.08); background-position:center; background-size:cover; filter:grayscale(1); opacity:.88; }
.life-drawer-thumb-dog { background-image:linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.2)),url('../assets/life-background.png'); background-position:38% 45%; }
.life-drawer-thumb-note { background-image:linear-gradient(135deg,rgba(20,20,20,.78),rgba(255,255,255,.35)),repeating-linear-gradient(0deg,transparent 0 10px,rgba(255,255,255,.25) 10px 11px); }
.life-drawer-thumb-photo { background-image:radial-gradient(circle at 30% 35%,rgba(255,255,255,.4),transparent 22%),linear-gradient(150deg,#222 0 35%,#777 35% 62%,#d5d5d5 62%); }
.life-elsewhere { position:absolute; right:4vw; bottom:4.5vh; z-index:4; width:min(360px,28vw); }
.life-elsewhere-title { margin:0 0 7px; padding-bottom:6px; border-bottom:1px solid rgba(23,21,15,.22); font-size:9px; letter-spacing:.08em; }
.life-social-links { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.life-social-links a { display:grid; justify-items:center; gap:5px; padding:7px 3px 6px; color:inherit; text-decoration:none; font-size:7px; letter-spacing:.04em; opacity:.74; transition:opacity 260ms ease,transform 260ms ease; }
.life-social-links a:hover,.life-social-links a:focus-visible { opacity:1; transform:translateY(-2px); outline:none; }
.life-social-icon { font-size:12px; line-height:1; }
.life-elsewhere-note { margin:7px 0 0; font-size:7px; opacity:.55; letter-spacing:.06em; }
.life-link.is-active .life-link-title::before { content:'▸ '; font-size:8px; }
.life-link.is-active::after { content:'•'; justify-self:end; margin-top:-22px; font-size:10px; }
.life-copy[data-life-lang='ja'] { margin-bottom:84px; }
@media (max-width:900px) {
  .life-drawer { left:8vw; right:3vw; top:10vh; bottom:12vh; padding:24px; }
  .life-drawer-item { grid-template-columns:90px 1fr; }
  .life-drawer-thumb { width:90px; }
  .life-elsewhere { width:42vw; right:4vw; }
}

/* Life interactive preview r2 — aligned to approved visual reference */
.content-frame.is-life .life-content {
  z-index: 3;
}

.content-frame.is-life .life-drawer {
  top: 14.2vh;
  left: 23.1%;
  right: 19.6%;
  bottom: 16.8vh;
  padding: 31px 45px 27px;
  border-color: rgba(35, 32, 25, .19);
  background: rgba(252, 251, 247, .20);
  box-shadow: 0 5px 18px rgba(40, 34, 24, .035);
  backdrop-filter: blur(.45px);
  -webkit-backdrop-filter: blur(.45px);
}

.content-frame.is-life .life-drawer-head {
  padding-bottom: 19px;
  border-bottom-color: rgba(35, 32, 25, .20);
}

.content-frame.is-life .life-drawer-title {
  margin-bottom: 9px;
  font-size: 13px;
  letter-spacing: .16em;
}

.content-frame.is-life .life-drawer-subtitle,
.content-frame.is-life .life-drawer-close {
  font-size: 8px;
}

.content-frame.is-life .life-drawer-body {
  padding: 27px 0 22px;
  gap: 20px;
}

.content-frame.is-life .life-drawer-item {
  grid-template-columns: 134px minmax(235px, 360px);
  gap: 26px;
}

.content-frame.is-life .life-drawer-thumb {
  width: 134px;
  aspect-ratio: 1 / 1;
  opacity: .86;
}

.content-frame.is-life .life-drawer-item h2 {
  margin-bottom: 12px;
  font-size: 14px;
  letter-spacing: .07em;
}

.content-frame.is-life .life-drawer-item p,
.content-frame.is-life .life-view-link {
  font-size: 8px;
}

.content-frame.is-life .life-drawer-item p {
  margin-bottom: 14px;
  line-height: 1.75;
}

.content-frame.is-life .life-drawer-foot {
  padding-top: 18px;
  border-top-color: rgba(35, 32, 25, .20);
}

.content-frame.is-life .life-elsewhere {
  right: 5.15vw;
  bottom: 4.0vh;
  width: min(430px, 29.5vw);
}

.content-frame.is-life .life-elsewhere-title {
  margin-bottom: 8px;
  padding-bottom: 7px;
  font-size: 8px;
  border-bottom-color: rgba(35, 32, 25, .23);
}

.content-frame.is-life .life-social-links {
  gap: 10px;
}

.content-frame.is-life .life-social-links a {
  min-height: 62px;
  box-sizing: border-box;
  align-content: center;
  gap: 5px;
  padding: 8px 4px 7px;
  border:1px solid rgba(35,32,25,.24);
  background:rgba(255,255,252,.56);
  color:rgba(22,20,15,.88);
  font-size: 7px;
  opacity:.90;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  text-shadow:0 1px 0 rgba(255,255,255,.8);
  transition: opacity 260ms ease, transform 260ms ease, background-color 260ms ease;
}

.content-frame.is-life .life-social-links a:hover,
.content-frame.is-life .life-social-links a:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
  background:rgba(255,255,252,.82);
  border-color:rgba(35,32,25,.44);
}

.content-frame.is-life .life-social-icon {
  font-size: 11px;
  opacity: .72;
}

.content-frame.is-life .life-elsewhere-note {
  margin-top: 8px;
  font-size: 7px;
}

/* Keep the left menu readable while the translucent drawer is open. */
.content-frame.is-life .life-content {
  pointer-events: auto;
}

@media (max-width: 1180px) {
  .content-frame.is-life .life-drawer {
    left: 22%;
    right: 7vw;
  }
  .content-frame.is-life .life-elsewhere {
    width: 34vw;
  }
}

@media (max-width: 900px) {
  .content-frame.is-life .life-drawer {
    top: 11vh;
    left: 7vw;
    right: 4vw;
    bottom: 15vh;
    padding: 24px;
  }
  .content-frame.is-life .life-drawer-item {
    grid-template-columns: 92px 1fr;
    gap: 18px;
  }
  .content-frame.is-life .life-drawer-thumb {
    width: 92px;
  }
  .content-frame.is-life .life-elsewhere {
    right: 4vw;
    width: 48vw;
  }
}

/* Life interactive preview r3 — drawer clears the left menu */
@media (min-width: 1181px) {
  .content-frame.is-life .life-drawer {
    left: clamp(430px, 28vw, 590px);
    right: 4.2vw;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .content-frame.is-life .life-drawer {
    left: clamp(330px, 31vw, 410px);
    right: 4vw;
  }
}

/* Life interactive preview r4 — fully clear the left menu on desktop */
@media (min-width: 1181px) {
  .content-frame.is-life .life-drawer {
    /* Life menu begins at 14vw and is 300px wide. Add 48px of breathing room. */
    left: calc(14% + 348px);
    right: 4.2vw;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .content-frame.is-life .life-drawer {
    left: 40vw;
    right: 4vw;
  }
}


/* Life interactive preview r5.1 — wider two-line pause before section links */
.content-frame.is-life .life-copy {
  margin-bottom: 112px;
}
.content-frame.is-life .life-copy[data-life-lang='ja'] {
  margin-bottom: 112px;
}
.content-frame.is-life .life-link {
  position: relative;
}
.content-frame.is-life .life-link.is-active {
  transform: translateX(7px);
  border-color: rgba(23,21,15,.72);
}
.content-frame.is-life .life-link.is-active .life-link-title::before {
  content: '';
}
.content-frame.is-life .life-link.is-active .life-link-title::after {
  content: '';
  display: inline-block;
  width: 38px;
  height: 1px;
  margin-left: 12px;
  vertical-align: middle;
  background: currentColor;
  transform-origin: left center;
  animation: life-active-line 560ms cubic-bezier(.22,.61,.36,1) both;
}
.content-frame.is-life .life-link.is-active::after {
  content: none;
}
@keyframes life-active-line {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: .72; }
}

.content-frame.is-life .life-drawer {
  opacity: 0;
  visibility: hidden;
  transform: scaleX(.015);
  transform-origin: left center;
  pointer-events: none;
  transition:
    transform 720ms cubic-bezier(.22,.61,.36,1),
    opacity 250ms ease,
    visibility 0s linear 720ms;
  overflow: hidden;
}
.content-frame.is-life .life-drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: scaleX(1);
  pointer-events: auto;
  transition-delay: 0s;
}
.content-frame.is-life .life-drawer-head,
.content-frame.is-life .life-drawer-foot,
.content-frame.is-life .life-drawer-body > * {
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 500ms ease, transform 650ms cubic-bezier(.22,.61,.36,1);
}
.content-frame.is-life .life-drawer.is-content-visible .life-drawer-head {
  opacity: 1;
  transform: none;
  transition-delay: 450ms;
}
.content-frame.is-life .life-drawer.is-content-visible .life-drawer-body > * {
  opacity: 1;
  transform: none;
  transition-delay: 570ms;
}
.content-frame.is-life .life-drawer.is-content-visible .life-drawer-foot {
  opacity: 1;
  transform: none;
  transition-delay: 690ms;
}

.content-frame.is-life .life-drawer-body {
  min-height: 0;
  overflow: auto;
}
.life-demo { position: relative; min-height: 100%; }
.life-demo h2 { font-weight: 400; }
.life-demo-index { margin: 0 0 11px; font-size: 7px; letter-spacing: .16em; opacity: .55; }
.life-demo-copy p:not(.life-demo-index) { max-width: 360px; }

.life-demo--life {
  display: grid;
  grid-template-columns: minmax(170px, 42%) minmax(220px, 1fr);
  grid-template-rows: 1fr auto;
  gap: 24px 34px;
  align-items: center;
}
.life-demo-visual--dog {
  align-self: stretch;
  min-height: 260px;
  border: 1px solid rgba(23,21,15,.10);
  background: linear-gradient(rgba(255,255,255,.17),rgba(255,255,255,.17)), url('../assets/life-background.png') 37% 45% / cover no-repeat;
  filter: grayscale(1);
  opacity: .88;
}
.life-demo-strip { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.life-demo-tile { height: 54px; border: 1px solid rgba(23,21,15,.09); filter: grayscale(1); opacity: .72; }
.life-demo-tile--dog-a { background: url('../assets/life-background.png') 18% 26% / 170% auto; }
.life-demo-tile--dog-b { background: url('../assets/life-background.png') 63% 48% / 150% auto; }
.life-demo-tile--dog-c { background: linear-gradient(145deg,rgba(20,20,20,.74),rgba(220,220,215,.34)); }

.life-demo--partner { display: grid; grid-template-columns: 1fr minmax(220px, 34%); grid-template-rows: 1fr auto; gap: 25px 34px; align-items: end; }
.life-demo-wide {
  min-height: 300px;
  border: 1px solid rgba(23,21,15,.10);
  background:
    linear-gradient(115deg, rgba(252,251,247,.05), rgba(252,251,247,.48)),
    radial-gradient(circle at 29% 42%, rgba(30,29,26,.75) 0 8%, transparent 8.5%),
    radial-gradient(circle at 56% 45%, rgba(80,77,69,.58) 0 6%, transparent 6.5%),
    linear-gradient(150deg,#282722 0 29%,#88857c 29% 58%,#dedbd2 58%);
  filter: grayscale(1);
  opacity: .76;
}
.life-demo-copy--partner { align-self: center; }
.life-demo-date { grid-column: 1/-1; justify-self: end; margin: 0; font-size: 7px; letter-spacing: .18em; opacity: .48; }

.life-demo--gallery { display: grid; align-content: start; gap: 24px; }
.life-demo-gallery-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.life-demo-gallery-head h2 { margin-bottom: 0 !important; }
.life-demo-grid { display: grid; grid-template-columns: repeat(3, minmax(100px, 1fr)); gap: 13px; }
.life-demo-grid-item { position: relative; min-height: 118px; overflow: hidden; border: 1px solid rgba(23,21,15,.09); filter: grayscale(1); opacity: .82; transition: transform 360ms ease, opacity 360ms ease; }
.life-demo-grid-item:hover { transform: scale(1.018); opacity: 1; }
.life-demo-grid-item i { position: absolute; left: 9px; bottom: 8px; font-style: normal; font-size: 6px; letter-spacing: .12em; color: rgba(255,255,255,.8); }
.life-demo-grid-item--1 { background: url('../assets/life-background.png') 38% 45% / 170% auto; }
.life-demo-grid-item--2 { background: linear-gradient(150deg,#1c1d1d 0 44%,#777 44% 63%,#ddd 63%); }
.life-demo-grid-item--3 { background: repeating-linear-gradient(90deg,#222 0 2px,#b9b9b4 2px 8px); }
.life-demo-grid-item--4 { background: radial-gradient(circle at 37% 41%,#222 0 8%,transparent 8.5%),linear-gradient(135deg,#d9d7d0,#65645e); }
.life-demo-grid-item--5 { background: linear-gradient(30deg,#222 0 33%,#f0eee8 33% 66%,#777 66%); }
.life-demo-grid-item--6 { background: repeating-radial-gradient(circle at 60% 45%,#222 0 2px,#aaa 2px 8px,#e6e3dc 8px 14px); }

@media (max-width: 1050px) {
  .life-demo--life, .life-demo--partner { grid-template-columns: 1fr; }
  .life-demo-strip, .life-demo-date { grid-column: 1; }
  .life-demo-visual--dog, .life-demo-wide { min-height: 190px; }
  .life-demo-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Life interactive preview r5.3 — move the section menu down, independently of the intro copy */
.content-frame.is-life .life-copy,
.content-frame.is-life .life-copy[data-life-lang='ja'] {
  margin-bottom: 0;
}
.content-frame.is-life .life-links {
  margin-top: 132px;
}

@media (max-height: 760px) and (min-width: 901px) {
  .content-frame.is-life .life-links {
    margin-top: 92px;
  }
}

/* Life + Contact integrated browser preview r6.2
   LIFEの背景は固定し、Contact画像は展開パネル内だけに表示。 */
.content-frame.is-life .life-drawer.is-contact-drawer {
  position: absolute;
  isolation: isolate;
  background:
    linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.06)),
    url('../assets/contact-room.png') center center / cover no-repeat;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.content-frame.is-life .life-drawer.is-contact-drawer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(255,255,255,.08);
}

.content-frame.is-life .life-drawer.is-contact-drawer .life-drawer-head,
.content-frame.is-life .life-drawer.is-contact-drawer .life-drawer-body,
.content-frame.is-life .life-drawer.is-contact-drawer .life-drawer-foot {
  position: relative;
  z-index: 1;
}

.content-frame.is-life .life-drawer.is-contact-drawer .life-drawer-head,
.content-frame.is-life .life-drawer.is-contact-drawer .life-drawer-foot {
  border-color: rgba(23,21,15,.17);
}

/* Contact中央表示と重複するため、上部左側の見出しだけ非表示。CLOSEは維持。 */
.content-frame.is-life .life-drawer.is-contact-drawer .life-drawer-head > div {
  visibility: hidden;
}

.content-frame.is-life .life-drawer-body.is-contact-demo {
  padding: 0;
  overflow: hidden;
}

.life-demo--contact {
  min-height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
}

.life-contact-center {
  transform: translateY(-7vh);
  padding: 26px 38px;
  background: rgba(255,255,255,.16);
}

.life-demo--contact .life-demo-index {
  display: none;
}

.life-demo--contact h2 {
  margin: 0;
  font-size: clamp(20px, 2vw, 31px);
  font-weight: 400;
  letter-spacing: .28em;
}

.life-contact-rule {
  display: block;
  width: 42px;
  height: 1px;
  margin: 30px auto 36px;
  background: rgba(23,21,15,.42);
}

.life-contact-message {
  margin: 0 auto 26px;
  max-width: 420px;
  font-size: clamp(10px, .83vw, 13px);
  line-height: 1.9;
  letter-spacing: .08em;
}

.life-contact-message--ja {
  letter-spacing: .04em;
}

.life-contact-email {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  font-size: clamp(10px, .95vw, 15px);
  letter-spacing: .18em;
  border-bottom: 1px solid transparent;
  transition: opacity 240ms ease, border-color 240ms ease;
}

.life-contact-action {
  display: block;
  width: max-content;
  margin: 24px auto 0;
  color: inherit;
  text-decoration: none;
  font-size: clamp(9px, .72vw, 11px);
  letter-spacing: .16em;
  border-bottom: 1px solid rgba(23,21,15,.36);
  padding-bottom: 4px;
  transition: opacity 240ms ease, transform 240ms ease;
}

.life-contact-email:hover,
.life-contact-email:focus-visible {
  opacity: .55;
  border-bottom-color: rgba(23,21,15,.42);
  outline: none;
}

.life-contact-action:hover,
.life-contact-action:focus-visible {
  opacity: .55;
  transform: translateX(3px);
  outline: none;
}

.life-panel[data-current-language="en"] .life-contact-message--ja,
.life-panel[data-current-language="en"] .life-contact-action--ja,
.life-panel[data-current-language="ja"] .life-contact-message--en,
.life-panel[data-current-language="ja"] .life-contact-action--en {
  display: none;
}

@media (max-width: 900px) {
  .content-frame.is-life .life-drawer.is-contact-drawer {
    background-position: center center;
  }
  .life-contact-center {
    transform: translateY(-5vh);
    padding: 20px 22px;
  }
  .life-demo--contact h2 { letter-spacing: .20em; }
  .life-contact-email { letter-spacing: .10em; }
  .life-contact-message { margin-bottom: 20px; line-height: 1.75; }
  .life-contact-action { margin-top: 18px; }
}


/* r7.12 — Archive title uses the same shared heading typography as Lab and Journal. */
.archive-intro h1 {
  font-family: inherit !important;
  font-weight: 400 !important;
  letter-spacing: .02em !important;
}
.archive-work-item--running .archive-work-link{align-items:center}
.archive-work-status{display:inline-flex;align-items:center;gap:3px;margin-left:5px;opacity:.42}
.archive-work-status i{display:block;width:2px;height:2px;background:currentColor;animation:archiveStatusPulse 1.2s steps(2,end) infinite}
.archive-work-status i:nth-child(2){animation-delay:.2s}
.archive-work-status i:nth-child(3){animation-delay:.4s}
@keyframes archiveStatusPulse{0%,35%{opacity:.18}36%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.archive-work-status i{animation:none;opacity:.65}}

/* r7.13 — Unified Archive / Lab / Journal title hierarchy and entry pulse. */
body.is-archive-mode { overflow: hidden; }
body.is-archive-mode .content-frame,
body.is-archive-mode .content-frame.fx-about,
body.is-archive-mode .content-frame.fx-archive,
body.is-archive-mode .content-frame.fx-journal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  transform: none !important;
  overflow: hidden !important;
  background: #fff !important;
  z-index: 10;
}
body.is-archive-mode .content-panel.archive-panel {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.archive-intro {
  position: absolute !important;
  z-index: 3;
  top: clamp(30px, 4.1vh, 62px) !important;
  left: clamp(54px, 8.55vw, 132px) !important;
  width: auto !important;
  color: #111;
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace !important;
  letter-spacing: .018em;
}
body.is-archive-mode .archive-panel .content-kicker,
body.is-lab-mode .lab-panel .content-kicker,
body.is-journal-mode .journal-panel .content-kicker {
  margin: 0 0 clamp(24px, 2.9vh, 42px) !important;
  font-size: clamp(8px, .56vw, 10px) !important;
  line-height: 1 !important;
  letter-spacing: .03em !important;
  font-weight: 600 !important;
}
body.is-archive-mode .archive-panel h1,
body.is-lab-mode .lab-panel h1,
body.is-journal-mode .journal-panel h1 {
  margin: 0 0 clamp(22px, 2.6vh, 34px) !important;
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace !important;
  font-size: clamp(16px, 1.15vw, 20px) !important;
  line-height: 1 !important;
  letter-spacing: .025em !important;
  font-weight: 400 !important;
}
.archive-description,
.lab-description,
.journal-description {
  margin: 0 !important;
  font-size: clamp(9px, .64vw, 11px) !important;
  line-height: 1.65 !important;
  letter-spacing: .018em !important;
  opacity: 1 !important;
}
.archive-work-list {
  margin: clamp(42px, 5.4vh, 72px) 0 0 !important;
}

/* A restrained breathing point beside every index entry. */
.archive-work-link,
.lab-entry-link,
.journal-entry-link {
  position: relative;
}
.archive-work-link::before,
.lab-entry-link::before,
.journal-entry-link::before {
  content: "";
  position: absolute;
  left: -15px;
  top: .72em;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .14;
  transform: translateY(-50%) scale(.72);
  animation: soulcraftEntryPulse 3.6s ease-in-out infinite;
  pointer-events: none;
}
.archive-work-item:nth-child(2) .archive-work-link::before,
.lab-entry:nth-child(2) .lab-entry-link::before { animation-delay: .45s; }
.archive-work-item:nth-child(3) .archive-work-link::before,
.lab-entry:nth-child(3) .lab-entry-link::before { animation-delay: .9s; }
@keyframes soulcraftEntryPulse {
  0%, 100% { opacity: .12; transform: translateY(-50%) scale(.72); }
  50% { opacity: .72; transform: translateY(-50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .archive-work-link::before,
  .lab-entry-link::before,
  .journal-entry-link::before { animation: none; opacity: .42; }
}
@media (max-width: 860px) {
  .archive-intro { top: 45px !important; left: 8vw !important; width: 84vw !important; }
}

/* r7.14 — About identity, independent footer pulses, fullscreen-safe Archive details. */
.about-contact-identity {
  margin: 14px 0 22px;
  font-size: 9px;
  line-height: 1.45;
  letter-spacing: .035em;
  opacity: .72;
}
.about-contact-identity a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.22);
}
.about-contact-identity a:hover,
.about-contact-identity a:focus-visible { opacity: .58; }

.fixed-index-menu .fixed-menu-trigger {
  position: relative;
}
.fixed-index-menu .fixed-menu-trigger::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .12;
  transform: translateY(-50%) scale(.7);
  pointer-events: none;
  animation: footerMenuPulse 4.15s ease-in-out infinite;
}
.fixed-index-menu .fixed-menu-trigger:nth-of-type(1)::before { animation-delay: -1.37s; animation-duration: 4.55s; }
.fixed-index-menu .main-menu .fixed-menu-trigger:nth-child(1)::before { animation-delay: -.43s; animation-duration: 3.92s; }
.fixed-index-menu .main-menu .fixed-menu-trigger:nth-child(2)::before { animation-delay: -2.11s; animation-duration: 4.83s; }
.fixed-index-menu .main-menu .fixed-menu-trigger:nth-child(3)::before { animation-delay: -3.04s; animation-duration: 4.27s; }
.fixed-index-menu .main-menu .fixed-menu-trigger:nth-child(4)::before { animation-delay: -1.76s; animation-duration: 5.06s; }
@keyframes footerMenuPulse {
  0%, 100% { opacity: .10; transform: translateY(-50%) scale(.66); }
  42% { opacity: .18; transform: translateY(-50%) scale(.76); }
  58% { opacity: .82; transform: translateY(-50%) scale(1); }
  70% { opacity: .24; transform: translateY(-50%) scale(.8); }
}
@media (prefers-reduced-motion: reduce) {
  .fixed-index-menu .fixed-menu-trigger::before { animation: none; opacity: .38; }
}

.archive-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .42s ease, visibility 0s linear .42s;
}
.archive-detail-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .42s ease;
}
.archive-detail-overlay iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

/* r7.16 — Archive frames are preloaded so opening a work does not navigate
   during native fullscreen. Only the selected frame is painted or interactive. */
.archive-detail-overlay .archive-detail-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.archive-detail-overlay .archive-detail-frame.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* r7.17 — Archive work selection is a true in-document control.
   Using buttons removes all browser navigation semantics, preserving the
   top document's native fullscreen state and its visual texture. */
.archive-work-link {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}