/* Haerangsa Archive — visual system
   Display: Bodoni Moda / body: Instrument Sans / metadata: IBM Plex Mono */
@font-face {
  font-family: "Permanent Marker";
  src: url("assets/fonts/permanent-marker.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #111213;
  --ink-soft: #1a1b1d;
  --paper: #e4dfd2;
  --paper-deep: #c9c1b3;
  --white: #f2eee5;
  --fog: #a5a8aa;
  --oxide: #8c493e;
  --magenta: #9b516d;
  --warm-orange: #c97842;
  --line-dark: rgba(242, 238, 229, .25);
  --line-light: rgba(17, 18, 19, .26);
  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --title: var(--display);
  --body: "Instrument Sans", "Arial Narrow", Arial, sans-serif;
  --prose: "Newsreader", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;
  --ease-out: cubic-bezier(.18, .84, .24, 1);
  --ease-spring: cubic-bezier(.22, 1.36, .42, 1);
  --device-width: 430px;
}

html[lang="ko"] { --display: "Noto Serif KR", "AppleMyungjo", serif; --body: "Noto Sans KR", "Apple SD Gothic Neo", sans-serif; --prose: "Noto Serif KR", "AppleMyungjo", serif; --mono: "IBM Plex Mono", "Noto Sans KR", monospace; }
html[lang="ja"] { --title: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; --display: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif; --body: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif; --prose: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif; }
html[lang="zh-CN"] { --title: "Ma Shan Zheng", "Noto Serif SC", "Songti SC", serif; --display: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; --body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; --prose: "Noto Serif SC", "Songti SC", serif; }
html[lang="zh-TW"] { --title: "LXGW WenKai TC", "Noto Serif TC", "Songti TC", serif; --display: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; --body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; --prose: "Noto Serif TC", "Songti TC", serif; }
html[lang="th"] { --title: "Charm", "Noto Serif Thai", Tahoma, serif; --display: "Noto Sans Thai", Tahoma, sans-serif; --body: "Noto Sans Thai", Tahoma, sans-serif; --prose: "Noto Serif Thai", Tahoma, serif; }
html[lang="ko"] h1, html[lang="ko"] h2 { word-break: keep-all; }
html[lang="ja"] h1, html[lang="ja"] h2,
html[lang="zh-CN"] h1, html[lang="zh-CN"] h2,
html[lang="zh-TW"] h1, html[lang="zh-TW"] h2 { line-break: strict; overflow-wrap: anywhere; word-break: normal; }
html[lang="fr"] .hero h1, html[lang="da"] .hero h1 { font-size: clamp(42px, 11.7cqw, 53px); line-height: .94; }
html[lang="fr"] .menu-panel a, html[lang="da"] .menu-panel a { font-size: clamp(30px, 8.7cqw, 40px); }
html[lang="ja"] .hero h1 { font-size: clamp(39px, 12.5cqw, 59px); line-height: .96; }
html[lang="th"] .hero h1 { font-size: clamp(36px, 10.8cqw, 50px); line-height: 1.34; letter-spacing: 0; }

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  color: var(--white);
  background: #090a0b;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 621px) { body { display: grid; place-items: center; } }
button, a, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { color: var(--ink); background: #c8b0a3; }

.skip-link {
  position: fixed;
  z-index: 999;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  color: var(--ink);
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-100% - 24px));
  transition: opacity .2s ease, transform .2s ease;
}
.skip-link:focus { opacity: 1; pointer-events: auto; transform: translateY(0); }

.desktop-caption {
  position: fixed;
  z-index: 1;
  top: 50%;
  width: calc(50vw - 270px);
  color: #6b6d6f;
  font: 10px/1.8 var(--mono);
  letter-spacing: .13em;
  transform: translateY(-50%);
}
.desktop-caption p { margin: 0; }
.desktop-caption--left { z-index: 3; top: auto; right: auto; bottom: 8px; left: 50%; width: auto; color: #929493; text-align: center; font-size: 9px; line-height: 1; white-space: nowrap; transform: translateX(-50%); }
.desktop-caption--right { right: 36px; }
.desktop-stage { position: fixed; z-index: 0; inset: 0; overflow: hidden; background: #08090a; }
.desktop-stage video { width: 100%; height: 100%; object-fit: cover; opacity: .38; filter: blur(5px) saturate(.45) brightness(.52); transform: scale(1.035); transition: opacity .8s ease; }
.desktop-stage__veil { position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(5,6,7,.15) 0 18%, rgba(5,6,7,.64) 62%, rgba(5,6,7,.88) 100%); }
.desktop-stage__script { position: absolute; top: 50%; left: 50%; color: rgba(238,232,218,.15); font: 400 clamp(170px, 25vw, 420px)/.7 "Mr De Haviland", cursive; white-space: nowrap; transform: translate(-50%,-50%) rotate(-4deg); text-shadow: 0 10px 50px rgba(0,0,0,.25); }

.device-shell {
  position: relative;
  z-index: 2;
  width: min(466px, calc(100vw - 48px));
  height: min(940px, calc(100vh - 60px));
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #323437;
  border-radius: 44px;
  background: var(--ink);
  box-shadow: 0 32px 100px rgba(0,0,0,.66), 0 0 0 7px #050606, 0 0 0 8px #292a2c;
  container-type: size;
}
.device-sensor {
  position: absolute;
  z-index: 110;
  top: 11px;
  left: 50%;
  width: 74px;
  height: 5px;
  border-radius: 5px;
  background: rgba(0,0,0,.72);
  transform: translateX(-50%);
  pointer-events: none;
}
.site {
  position: relative;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-width: none;
  background: var(--ink);
}
.site::-webkit-scrollbar { display: none; }

.noise {
  position: absolute;
  z-index: 100;
  inset: 0;
  min-height: 100%;
  opacity: .065;
  pointer-events: none;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
}
.scroll-progress {
  position: sticky;
  z-index: 105;
  top: 60px;
  width: 100%;
  height: 0;
  pointer-events: none;
}
.scroll-progress span {
  position: absolute;
  inset: 0 0 auto;
  display: block;
  width: 100%;
  height: 2px;
  background: var(--oxide);
  transform: scaleX(0);
  transform-origin: left center;
}

.boot {
  position: absolute;
  z-index: 200;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 32px;
  color: #d6d2c9;
  background: #090a0b;
  font: 10px var(--mono);
  letter-spacing: .14em;
  transition: opacity .5s ease, visibility .5s ease;
}
.boot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.025) 3px);
}
.boot.is-hidden { opacity: 0; visibility: hidden; }
.boot__line { width: 230px; height: 1px; margin-bottom: 18px; overflow: hidden; background: #323436; }
.boot__line::after { content: ""; display: block; width: 45%; height: 100%; background: #d8d3c9; animation: boot-line 1.05s var(--ease-out) forwards; }
.boot__counter { display: flex; justify-content: space-between; margin-top: 10px; color: #777a7c; }
@keyframes boot-line { from { transform: translateX(-120%); } to { transform: translateX(225%); } }

.site-bar {
  position: sticky;
  z-index: 90;
  top: 0;
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  min-height: 60px;
  padding: 5px 14px;
  border-bottom: 1px solid transparent;
  color: var(--white);
  transition: background .35s ease, border-color .35s ease, color .35s ease;
}
.site-bar.is-scrolled {
  border-bottom-color: rgba(255,255,255,.12);
  background: rgba(14,15,16,.87);
  backdrop-filter: blur(12px);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 48px;
  padding: 2px 4px 0 0;
  font: 400 32px/.8 "Mr De Haviland", cursive;
  letter-spacing: .01em;
  text-transform: none;
  transition: opacity .25s ease, transform .35s var(--ease-out);
}
.wordmark:hover, .wordmark:focus-visible { transform: translateY(-1px) scale(1.025); }

.bgm-button {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 0;
  color: #c8c7c1;
  background: transparent;
  cursor: pointer;
  font: 9px var(--mono);
  letter-spacing: .08em;
}
.bgm-button i { width: 5px; height: 5px; border: 1px solid currentColor; border-radius: 50%; }
.bgm-button[aria-pressed="true"] i { border-color: var(--magenta); background: var(--magenta); box-shadow: 0 0 8px rgba(255,38,153,.72); animation: bgm-pulse 1.4s ease-in-out infinite; }
@keyframes bgm-pulse { 50% { opacity: .35; transform: scale(.72); } }
.bgm-player {
  position: absolute;
  z-index: 3;
  top: 100%;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  min-height: 54px;
  padding: 7px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.14);
  color: var(--white);
  background: rgba(14,15,16,.92);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  backdrop-filter: blur(14px);
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scaleY(1);
  transform-origin: top center;
  transition: opacity .28s ease, filter .28s ease, transform .36s var(--ease-out);
  will-change: opacity, filter, transform;
}
.bgm-player.is-entering,
.bgm-player.is-exiting {
  opacity: 0;
  filter: blur(2px);
  transform: translateY(-9px) scaleY(.96);
  pointer-events: none;
}
.site-bar > :not(.bgm-player):not(.language-panel) { position: relative; z-index: 2; }
.bgm-player[hidden] { display: none; }
.bgm-player__copy { display: grid; grid-template-columns: auto minmax(0,1fr); column-gap: 8px; min-width: 0; }
.bgm-player__label { align-self: center; grid-row: 1 / 3; color: #858684; font: 7px/1.25 var(--mono); letter-spacing: .06em; }
.bgm-player__title, .bgm-player small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bgm-player__title {
  min-width: 0;
  margin: -2px 0;
  padding: 2px 0;
  overflow: hidden;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  font: 500 10px/1.3 var(--body);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bgm-player__title:hover, .bgm-player__title:focus-visible { color: var(--magenta); }
.bgm-player small { color: #aaa9a4; font: 7px/1.3 var(--mono); letter-spacing: .02em; }
.bgm-player__controls { display: flex; flex: 0 0 auto; align-items: center; }
.bgm-control { width: 42px; min-width: 42px; min-height: 44px; padding: 0; border: 0; color: #d6d3cb; background: transparent; cursor: pointer; }
.bgm-control:hover, .bgm-control:focus-visible { color: var(--white); background: rgba(255,255,255,.07); }
.icon-control { display: inline-grid; place-items: center; }
.icon-control svg { width: 19px; height: 19px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.bgm-control svg { grid-area: 1 / 1; width: 18px; height: 18px; }
.bgm-control:not(#bgmPlayPause) svg path:first-child,
.bgm-control__play path { fill: currentColor; stroke: none; }
.bgm-control__pause { display: none; }
#bgmPlayPause[data-playing="true"] .bgm-control__play { display: none; }
#bgmPlayPause[data-playing="true"] .bgm-control__pause { display: block; }
.language-button {
  min-width: 48px;
  min-height: 48px;
  margin-right: 2px;
  padding: 0;
  border: 0;
  color: #c8c7c1;
  background: transparent;
  cursor: pointer;
  font: 11px var(--mono);
  letter-spacing: .08em;
}
.menu-button, .menu-close {
  min-width: 60px;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: 11px var(--mono);
  letter-spacing: .1em;
}
.menu-button { display: flex; gap: 7px; align-items: center; justify-content: flex-end; }
.menu-button i { display: block; width: 6px; height: 6px; border: 1px solid currentColor; border-radius: 50%; transition: background .2s ease; }
.menu-button[aria-expanded="true"] i { background: currentColor; }

.menu-panel {
  position: absolute;
  z-index: 120;
  inset: 8px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 34px 22px 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 36px;
  color: var(--ink);
  background: var(--paper);
  animation: panel-in .42s var(--ease-out) both;
}
.menu-panel[hidden] { display: none; }
.menu-panel__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9vh; padding-bottom: 10px; border-bottom: 1px solid var(--line-light); font: 10px var(--mono); }
.menu-panel a { display: grid; grid-template-columns: 32px 1fr; align-items: baseline; padding: 8px 0 12px; border-bottom: 1px solid var(--line-light); font: 400 clamp(34px, 10cqw, 46px)/1 var(--display); letter-spacing: -.018em; }
.menu-panel a span { font: 9px var(--mono); letter-spacing: 0; }
.menu-panel__foot { position: absolute; bottom: 30px; font: 9px var(--mono); letter-spacing: .08em; }
@keyframes panel-in { from { opacity: 0; transform: translateY(16px); } }

.floating-section-nav { position: absolute; z-index: 112; right: 14px; bottom: 18px; display: grid; gap: 8px; }
.floating-section-nav__button { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(242,238,229,.42); border-radius: 50%; color: var(--white); background: rgba(12,13,14,.72); box-shadow: 0 8px 24px rgba(0,0,0,.24); backdrop-filter: blur(12px); cursor: pointer; }
.floating-section-nav__button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.floating-section-nav__button:disabled { display: none; }
.floating-section-nav__button:not(:disabled):hover, .floating-section-nav__button:not(:disabled):focus-visible { color: var(--ink); background: var(--paper); }

.language-panel {
  position: absolute;
  z-index: 121;
  top: 100%;
  left: 50%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(390px, calc(100vw - 56px));
  padding: 12px;
  border: 1px solid #64615b;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
  transform: translateX(-50%);
  animation: language-in .28s var(--ease-out) both;
  max-height: min(780px, calc(100vh - 96px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.language-panel[hidden] { display: none; }
.language-panel__head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 6px 8px; border-bottom: 1px solid var(--line-light); font: 9px var(--mono); letter-spacing: .08em; }
.language-panel__head button { min-width: 52px; min-height: 44px; border: 0; color: var(--ink); background: transparent; cursor: pointer; font: 10px var(--mono); }
.language-panel > button[data-locale] { display: grid; grid-template-columns: 50px 1fr; align-items: center; min-height: 56px; padding: 0 10px; border: 0; border-bottom: 1px solid var(--line-light); color: var(--ink); background: transparent; cursor: pointer; text-align: left; }
.language-panel > button[data-locale]:nth-of-type(odd) { border-right: 1px solid var(--line-light); }
.language-panel > button[data-locale].is-active { color: var(--paper); background: var(--ink); }
.language-panel > button[data-locale] span { font: 11px var(--mono); }
.language-panel > button[data-locale] small { font-size: 13px; }
.language-panel > p { grid-column: 1 / -1; margin: 10px 6px 2px; color: #66635d; font: 7px/1.5 var(--mono); letter-spacing: .04em; }
@keyframes language-in { from { opacity: 0; transform: translate(-50%, -8px); } }

.hero {
  position: relative;
  min-height: calc(100svh - 60px);
  min-height: calc(100cqh - 60px);
  overflow: hidden;
  background: #121416;
}
.hero__image, .hero__shade { position: absolute; inset: 0; }
.hero__image { transform: scale(1.05); transition: transform 1.2s var(--ease-out); }
.hero__image video,
.hero__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.56) contrast(1.04) brightness(.75); }
.hero__video { z-index: 1; opacity: 0; transition: opacity 1.2s ease-in-out; }
.hero__video.is-active { z-index: 2; opacity: 1; }
.hero__video.is-incoming { z-index: 3; }
.hero__video.is-outgoing { z-index: 4; opacity: 0; }
.hero__video.is-recovering { transition: none; }
.hero__image img { opacity: 1; transition: opacity .45s ease; }
.hero__image.is-video-playing img { opacity: 0; }
.hero__shade { background: linear-gradient(180deg, rgba(7,8,9,.28) 0%, rgba(7,8,9,.08) 33%, rgba(7,8,9,.72) 74%, #0d0e0f 100%); }
.hero__meta {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 18px;
  left: 18px;
  display: flex;
  justify-content: space-between;
  color: rgba(240,236,226,.76);
  font-size: 8px;
  letter-spacing: .08em;
}
.hero__copy { position: absolute; z-index: 3; right: 20px; bottom: 28px; left: 20px; }
.eyebrow { margin: 0 0 10px; font: 9px/1.5 var(--mono); letter-spacing: .11em; }
.hero h1 { margin: 0; font: 500 clamp(47px, 13.5cqw, 61px)/.91 var(--title); letter-spacing: .005em; }
.hero h1 em { font-weight: 400; }
.hero__intro { max-width: 330px; margin: 18px 0 22px; color: rgba(242,238,229,.82); font-size: 14px; line-height: 1.55; white-space: pre-line; text-wrap: balance; }
html[lang="ko"] .hero h1 { max-width: none; font-size: clamp(39px, 11.6cqw, 52px); line-height: 1.01; letter-spacing: -.012em; word-break: keep-all; white-space: nowrap; }
html[lang="ko"] .hero h1 em { display: inline-block; white-space: nowrap; }
html[lang="ko"] .hero__intro { max-width: 340px; word-break: keep-all; }
.hero-scroll-hint { position: absolute; z-index: 5; top: 43%; right: 10px; display: grid; place-items: center; width: 46px; min-height: 74px; padding: 8px 0; border: 1px solid rgba(242,238,229,.42); border-radius: 25px; color: rgba(242,238,229,.82); background: rgba(7,8,9,.32); backdrop-filter: blur(8px); cursor: pointer; transition: opacity .35s ease, transform .45s var(--ease-out), background .25s ease; animation: scroll-hint-float 2.4s ease-in-out infinite; }
.hero-scroll-hint span { writing-mode: vertical-rl; font: 7px var(--mono); letter-spacing: .12em; }
.hero-scroll-hint svg { width: 17px; height: 17px; margin-top: 6px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.hero-scroll-hint:hover, .hero-scroll-hint:focus-visible { background: rgba(7,8,9,.66); }
.hero-scroll-hint.is-hidden { opacity: 0; pointer-events: none; transform: translateY(12px); }
@keyframes scroll-hint-float { 50% { translate: 0 5px; } }
.enter-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  padding: 0 16px;
  border: 1px solid rgba(242,238,229,.65);
  color: var(--white);
  background: rgba(10,11,12,.12);
  cursor: pointer;
  font: 11px var(--mono);
  letter-spacing: .11em;
  transition: color .24s ease, background .24s ease;
}
.enter-button:hover, .enter-button:focus-visible { color: var(--ink); background: var(--white); }
.enter-button__mark { font-size: 18px; }
.hero__edge { position: absolute; z-index: 3; right: 5px; top: 50%; color: rgba(255,255,255,.42); font-size: 7px; letter-spacing: .12em; transform: rotate(90deg) translateX(50%); transform-origin: right top; }

.paper-section {
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='.18 0 0 0 .34 0 .16 0 0 .31 0 0 .13 0 .25 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)' opacity='.34'/%3E%3C/svg%3E"),
    linear-gradient(104deg, rgba(255,255,255,.018), rgba(88,70,49,.014));
  background-repeat: repeat, no-repeat;
  background-size: 180px 180px, 100% 100%;
}
.manifesto, .archive, .agents { padding: 74px 20px 82px; }
.section-label {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 58px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line-light);
  font: 9px var(--mono);
  letter-spacing: .09em;
}
.section-label--light { border-color: var(--line-dark); color: var(--white); }
.section-label span:last-child { justify-self: end; text-align: right; }
.section-label span:last-child { opacity: .6; }
.manifesto__body h2, .archive__head h2, .about h2, .museum h2, .agents h2, .collaboration h2 {
  margin: 0;
  font: 500 clamp(38px, 11.5cqw, 52px)/.98 var(--title);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.manifesto__body h2 { line-height: 1.08; letter-spacing: -.008em; word-break: keep-all; }
.manifesto__body > p { max-width: calc(100% - 36px); margin: 38px 0 0 36px; font-size: 16px; line-height: 1.72; text-align: right; white-space: pre-line; word-break: keep-all; }
.manifesto__body > p + p { margin-top: 12px; color: #4c4a45; }
.manifesto__still { margin: 56px -20px 0; }
.manifesto__play { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 0; color: var(--white); background: #111; cursor: pointer; text-align: left; }
.manifesto__play img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.manifesto__play span { position: absolute; right: 12px; bottom: 12px; min-height: 44px; padding: 14px 12px 0; background: rgba(10,11,12,.76); font: 10px var(--mono); letter-spacing: .08em; }
.manifesto__still figcaption { display: flex; justify-content: space-between; margin: 0; padding: 8px 20px; border-bottom: 1px solid var(--line-light); font: 8px var(--mono); letter-spacing: .08em; }
.touch-note { margin: 10px 0 0; color: #605e58; font-size: 8px; letter-spacing: .08em; }
.touch-note:empty { display: none; }

.media-touch { overflow: hidden; }
.media-touch img { transition: filter .7s ease, transform 1.1s var(--ease-out); filter: saturate(.52) contrast(.98); }
.media-touch:hover img, .media-touch:active img, .media-touch.is-touched img { filter: saturate(.95) contrast(1.02); transform: scale(1.018); }

.scrubber { padding: 74px 0 76px; overflow: hidden; background: #131416; }
.scrubber > .section-label { margin-right: 20px; margin-left: 20px; }
.scrubber__stage { padding: 0 20px; }
.scrubber__image { position: relative; aspect-ratio: 4/5; background: #080909; cursor: pointer; }
.scrubber__image::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.14); pointer-events: none; }
.scrubber__image img { width: 100%; height: 100%; object-fit: cover; transition: opacity .22s ease, transform .8s var(--ease-out), filter .7s ease; }
.scrubber__image.is-changing img { opacity: .18; transform: scale(1.03); }
.scrubber__play, .scrubber__counter { position: absolute; z-index: 2; top: 12px; padding: 4px 7px; color: var(--white); background: rgba(10,11,12,.72); font: 8px var(--mono); letter-spacing: .08em; }
.scrubber__play { left: 12px; }
.scrubber__counter { right: 12px; }
.scrubber__film-date { position: absolute; z-index: 3; right: 14px; bottom: 13px; color: #ff9a42; font: 500 12px/1 var(--mono); letter-spacing: .1em; text-shadow: 0 0 2px #7a2705, 0 1px 3px rgba(0,0,0,.8); opacity: .92; pointer-events: none; }
.scrubber__caption { display: flex; gap: 14px; align-items: flex-end; justify-content: space-between; padding: 15px 0 0; }
.scrubber__caption h2 { margin: 6px 0 0; max-width: 260px; font: 400 24px/1.02 var(--title); letter-spacing: -.01em; }
.scrubber__caption .mono { color: #8d8f90; font-size: 8px; }
.source-link { min-height: 48px; padding-top: 14px; color: #b9b8b3; font: 10px var(--mono); white-space: nowrap; }
.timeline { padding: 38px 20px 0; }
.timeline label { display: block; margin-bottom: 12px; color: #9d9e9c; font: 8px var(--mono); letter-spacing: .1em; }
.timeline input { width: 100%; height: 30px; margin: 0; accent-color: var(--paper); cursor: ew-resize; background: transparent; }
.timeline input::-webkit-slider-runnable-track { height: 1px; background: #696b6d; }
.timeline input::-webkit-slider-thumb { width: 15px; height: 15px; margin-top: -7px; border: 1px solid var(--paper); border-radius: 0; background: var(--ink); -webkit-appearance: none; }
.timeline input::-moz-range-track { height: 1px; background: #696b6d; }
.timeline input::-moz-range-thumb { width: 14px; height: 14px; border: 1px solid var(--paper); border-radius: 0; background: var(--ink); }
.timeline__ticks { display: flex; justify-content: space-between; color: #77797a; font: 7px var(--mono); }
.filmstrip-wrap { margin-top: 38px; overflow: hidden; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.filmstrip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 20px;
  cursor: grab;
  scrollbar-width: none;
  user-select: none;
  touch-action: pan-x;
}
.filmstrip.is-dragging { cursor: grabbing; }
.filmstrip::-webkit-scrollbar { display: none; }
.filmstrip button { position: relative; flex: 0 0 104px; height: 80px; padding: 0; overflow: hidden; border: 1px solid transparent; opacity: .6; background: #0a0b0c; cursor: pointer; transition: opacity .2s ease, border-color .2s ease; }
.filmstrip button.is-active { border-color: var(--paper); opacity: 1; }
.filmstrip img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; filter: saturate(.6); }
.filmstrip button span { position: absolute; right: 5px; bottom: 5px; padding: 3px 5px; background: rgba(5,6,7,.76); font: 8px var(--mono); pointer-events: none; }

.archive__head p { max-width: 280px; margin: 22px 0 40px auto; color: #4e4c47; font-size: 14px; line-height: 1.65; text-align: right; white-space: pre-line; }
.archive-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.archive-card { position: relative; display: block; min-width: 0; padding: 0; overflow: hidden; border: 0; color: var(--white); background: #222; cursor: pointer; text-align: left; }
.archive-card.is-wide { grid-column: 1 / -1; }
.archive-card[hidden] { display: none; }
.archive-card__image { position: relative; display: block; aspect-ratio: 3/4; overflow: hidden; }
.archive-card.is-wide .archive-card__image { aspect-ratio: 16/10; }
.archive-card img, .archive-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.52) contrast(1.02); transition: filter .45s ease, transform .8s var(--ease-out), opacity .3s ease; }
.archive-card video { z-index: 1; opacity: 0; }
.archive-card.is-playing video { opacity: 1; }
.archive-card.is-playing img { opacity: 0; }
.archive-card:hover img, .archive-card:focus-visible img, .archive-card:hover video, .archive-card:focus-visible video { filter: saturate(.92); transform: scale(1.025); }
.archive-card__image::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 54%, rgba(5,6,7,.62)); }
.archive-card__meta { position: absolute; z-index: 2; right: 9px; bottom: 8px; left: 9px; display: flex; justify-content: space-between; font: 7px var(--mono); letter-spacing: .06em; }
.archive-card__number { position: absolute; z-index: 2; top: 8px; left: 8px; padding: 3px 5px; background: rgba(7,8,9,.7); font: 7px var(--mono); }
.archive-card__play { position: absolute; z-index: 2; top: 8px; right: 8px; min-height: 40px; padding: 13px 9px 0; background: rgba(7,8,9,.76); font: 9px var(--mono); letter-spacing: .06em; }
.archive-card.is-playing .archive-card__play { font-size: 0; }
.archive-card.is-playing .archive-card__play::after { content: "PLAYING"; font: 9px var(--mono); letter-spacing: .06em; }
.full-width-link, .project-link { display: flex; align-items: center; justify-content: space-between; min-height: 58px; margin-top: 28px; padding: 0 16px; border: 1px solid var(--ink); font: 10px var(--mono); letter-spacing: .08em; transition: color .2s ease, background .2s ease; }
.full-width-link span:first-child, .project-link span:first-child, .agents__document span:first-child { min-width: 0; overflow-wrap: anywhere; }
.full-width-link:hover, .full-width-link:focus-visible { color: var(--paper); background: var(--ink); }

.about { background: #141517; }
.about__portrait { position: relative; display: grid; place-items: center; height: clamp(360px, 45cqh, 400px); overflow: hidden; background: #0d0e10; }
.about__portrait::before { content: ""; position: absolute; inset: 0; opacity: .3; background: linear-gradient(90deg, transparent 49.8%, rgba(255,255,255,.12) 50%, transparent 50.2%), linear-gradient(0deg, transparent 49.8%, rgba(255,255,255,.08) 50%, transparent 50.2%); }
.about__portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, #141517); pointer-events: none; }
.about__profile-photo { position: relative; z-index: 1; width: min(52cqw, 218px); aspect-ratio: 1; padding: 8px 8px 26px; background: #d7d0c3; box-shadow: 0 20px 50px rgba(0,0,0,.44); transform: rotate(-1.4deg); }
.about__profile-photo::after { content: "H0LID / ID 01"; position: absolute; right: 9px; bottom: 7px; color: #282725; font: 7px var(--mono); letter-spacing: .08em; }
.about__profile-photo img { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.about__portrait-label { position: absolute; z-index: 2; top: 18px; left: 16px; padding: 5px 7px; color: rgba(242,238,229,.8); background: rgba(10,11,12,.55); font-size: 7px; letter-spacing: .08em; }
.about__content { padding: 28px 20px 82px; }
.about__content h2 span { font-size: .56em; white-space: nowrap; }
.about__role { margin: 25px 0 0 auto; color: #bdb9b1; font: 10px/1.6 var(--mono); letter-spacing: .05em; text-align: right; }
.about__text { margin: 34px 0 0 46px; color: #cbc8c1; font-size: 15px; line-height: 1.6; text-align: right; }
.about__text p { white-space: pre-line; }
.about__text p + p { margin-top: 16px; }
.career-list { margin: 38px 0 0; padding: 0; border-top: 1px solid var(--line-dark); list-style: none; }
.career-list li { display: grid; grid-template-columns: 1fr; justify-items: start; gap: 4px; padding: 15px 0; border-bottom: 1px solid var(--line-dark); text-align: left; }
.career-list span { color: #858681; font: 10px/1.5 var(--mono); letter-spacing: .08em; }
.career-list strong { font-size: 14px; font-weight: 500; text-align: left; }
.career-list time { color: #9e9e99; font: 11px var(--mono); text-align: left; }
.career-list .is-current { margin: 0 -10px; padding-right: 10px; padding-left: 10px; background: rgba(201,120,66,.1); box-shadow: inset 3px 0 var(--warm-orange); }
.career-list .is-current span { color: var(--warm-orange); }
.career-list .is-current strong, .career-list .is-current time { color: var(--white); }
.career-list .is-current strong { font-size: 17px; font-weight: 600; line-height: 1.25; }
.career-list .is-current time { font-size: 12px; }
.profile-links { display: flex; justify-content: center; gap: 12px; margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--line-dark); }
.profile-links .profile-link { display: grid; place-items: center; width: 60px; height: 60px; flex: 0 0 60px; padding: 0; border: 1px solid rgba(242,238,229,.42); border-radius: 50%; color: var(--white); background: rgba(255,255,255,.025); }
.profile-link svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.profile-link--linkedin svg path { stroke-width: 1.8; }
.profile-link__dot { fill: currentColor; stroke: none; }
.profile-links .profile-link:hover, .profile-links .profile-link:focus-visible { border-color: var(--warm-orange); color: var(--warm-orange); background: rgba(201,120,66,.08); }

.museum { padding: 74px 20px 82px; background: #17191d; }
.museum__visual { position: relative; margin: 0 -20px; }
.museum__visual img { width: 100%; aspect-ratio: 1.4/1; object-fit: cover; object-position: center; }
.museum__visual::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 -70px 70px #17191d; pointer-events: none; }
.museum__mockup { height: clamp(410px, 112cqw, 470px); min-height: 0; overflow: hidden; background: #6f685f; }
.museum__mockup::after { z-index: 2; box-shadow: inset 0 -72px 82px #17191d; }
.museum__mockup img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; filter: saturate(.78) contrast(1.03); transform: scale(1.08); transform-origin: center top; }
.museum__pin { position: absolute; z-index: 2; right: 12px; bottom: 54px; padding: 4px 6px; border: 1px solid rgba(255,255,255,.4); font: 7px var(--mono); }
.museum__copy { position: relative; z-index: 3; margin-top: -30px; }
.museum__copy h2 { font-size: 62px; }
.museum__copy > p:not(.eyebrow) { margin: 24px 0 0 46px; color: #c6c5c0; font-size: 14px; line-height: 1.58; text-align: right; white-space: pre-line; }
.project-link { margin-top: 36px; border-color: var(--white); }
.project-link:hover, .project-link:focus-visible { color: var(--ink); background: var(--white); }

.agents { overflow: hidden; }
.agents__marquee { display: flex; width: max-content; margin: 0 -20px 50px; padding: 9px 0; border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); font: 9px var(--mono); letter-spacing: .08em; animation: marquee 19s linear infinite; }
.agents__marquee span { white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }
.agents__copy p { margin: 28px 0 0 46px; font-size: 15px; line-height: 1.6; text-align: right; white-space: pre-line; }
.agents__copy p + p { color: #5b5852; }
.agents__document { display: flex; align-items: center; justify-content: space-between; min-height: 58px; margin-top: 34px; padding: 0 14px; border: 1px solid var(--ink); font: 9px/1.4 var(--mono); letter-spacing: .06em; transition: color .2s ease, background .2s ease; }
.agents__document:hover, .agents__document:focus-visible { color: var(--paper); background: var(--ink); }

.collaboration { min-height: 100cqh; padding: 74px 20px 28px; background: #101112; }
.collaboration__copy > p:last-child { margin: 30px 0 0 46px; color: #bbb8b1; font-size: 15px; line-height: 1.58; text-align: right; white-space: pre-line; }
html[lang="ko"] .agents__copy h2 { font-size: clamp(37px, 10cqw, 40px); line-height: 1.02; }
html[lang="ko"] .collaboration__copy h2 { font-size: clamp(34px, 9.2cqw, 37px); line-height: 1.04; }
.contact-sheet { margin-top: 54px; border-top: 1px solid var(--line-dark); }
.contact-row { display: grid; grid-template-columns: 54px minmax(0,1fr) auto; gap: 9px; align-items: center; min-height: 61px; border-bottom: 1px solid var(--line-dark); }
.contact-row > span:first-child { color: #8f908d; font-size: 9px; letter-spacing: .08em; }
.contact-row > span:first-child { overflow-wrap: anywhere; }
.contact-row strong { overflow: hidden; font-size: 13px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.contact-row:hover strong, .contact-row:focus-visible strong { font-style: italic; }
footer { display: flex; align-items: flex-end; justify-content: flex-start; margin-top: 80px; padding-top: 14px; border-top: 1px solid var(--line-dark); color: #777977; font: 8px var(--mono); letter-spacing: .08em; }

.record-dialog {
  width: min(var(--device-width), 100vw);
  max-width: none;
  height: min(900px, 100vh);
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 36px;
  color: var(--ink);
  background: var(--paper);
}
.record-dialog::backdrop { background: rgba(0,0,0,.78); backdrop-filter: blur(7px); }
.record-dialog[open] { animation: dialog-in .38s var(--ease-out) both; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(24px) scale(.985); } }
.record-dialog__sheet { height: 100%; overflow-y: auto; scrollbar-width: none; }
.record-dialog__sheet::-webkit-scrollbar { display: none; }
.record-dialog__bar { position: sticky; z-index: 4; top: 0; display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 5px 16px; border-bottom: 1px solid var(--line-light); background: rgba(228,223,210,.94); backdrop-filter: blur(12px); font: 10px var(--mono); }
.record-dialog__bar button { min-width: 64px; min-height: 48px; border: 0; color: var(--ink); background: transparent; cursor: pointer; font: 10px var(--mono); }
.record-dialog__media { position: relative; min-height: min(700px, calc(100dvh - 58px)); margin: 0; overflow: hidden; background: #111; }
.record-dialog__media img,
.record-dialog__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.record-dialog__media img { z-index: 1; filter: saturate(.76) brightness(.72); }
.record-dialog__media video { z-index: 2; background: #111; cursor: pointer; opacity: 1; transition: opacity .2s ease; }
.record-dialog__media video[hidden] { display: none; }
.record-dialog__media.is-loading video { opacity: 0; pointer-events: none; }
.record-dialog__video-state { position: absolute; z-index: 3; right: 16px; bottom: 16px; min-width: 58px; min-height: 42px; padding: 14px 10px 0; color: var(--white); background: rgba(10,11,12,.76); font: 9px var(--mono); letter-spacing: .08em; text-align: center; pointer-events: none; }
.record-dialog__media:not(.has-video) .record-dialog__video-state,
.record-dialog__media.is-loading .record-dialog__video-state { display: none; }
.record-dialog__loading { position: absolute; z-index: 1; right: 16px; bottom: 16px; padding: 8px 10px; color: var(--white); background: rgba(10,11,12,.76); font: 9px var(--mono); letter-spacing: .06em; }
.record-dialog__media:not(.is-loading) .record-dialog__loading { display: none; }
.record-dialog__copy { padding: 22px 20px 26px; }
.record-dialog__copy > div { display: flex; justify-content: space-between; font-size: 10px; }
.record-dialog__copy h2 { margin: 20px 0 0; font: 400 40px/.95 var(--title); letter-spacing: -.015em; }
.record-dialog__copy p { margin: 18px 0 24px; color: #504e49; font-size: 14px; text-align: right; }
.record-dialog__copy a { display: inline-block; min-height: 48px; padding-top: 14px; border-bottom: 1px solid var(--ink); font: 10px var(--mono); letter-spacing: .06em; }
.record-dialog__nav { display: grid; grid-template-columns: 1fr 1fr; padding: 0 20px 28px; }
.record-dialog__nav button { min-height: 54px; border: 1px solid var(--ink); color: var(--ink); background: transparent; cursor: pointer; font: 10px var(--mono); }
.record-dialog__nav button + button { border-left: 0; }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .72s var(--ease-out), transform .72s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.tactile { position: relative; transition: transform .16s var(--ease-spring); }
.tactile:active { transform: scale(.975); }
button:focus-visible, a:focus-visible, input:focus-visible, video:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }
.mono { font-family: var(--mono); }

@media (max-width: 620px) {
  body { overflow: auto; background: var(--ink); }
  .desktop-caption, .desktop-stage, .device-sensor { display: none; }
  .bgm-player { position: absolute; z-index: 3; top: 100%; right: 0; left: 0; }
  .device-shell {
    width: 100%;
    height: auto;
    min-height: 100svh;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    container-type: normal;
  }
  .site { height: auto; min-height: 100svh; overflow: visible; }
  .hero { min-height: calc(100svh - 60px); }
  .menu-panel { position: fixed; inset: 0; width: 100%; height: 100svh; margin: 0; border-radius: 0; transform: none; }
  .floating-section-nav { position: fixed; right: 14px; bottom: calc(16px + env(safe-area-inset-bottom)); }
  .language-panel { position: fixed; top: 60px; width: calc(100vw - 24px); }
  @keyframes panel-in { from { opacity: 0; transform: translateY(16px); } }
  .record-dialog { width: 100vw; height: 100dvh; margin: 0; border-radius: 0; }
}

@media (min-width: 621px) {
  .about__content { padding-top: 14px; }
}

@media (max-width: 380px) {
  .site-bar { grid-template-columns: 1fr auto auto auto; padding-right: 10px; padding-left: 12px; }
  .bgm-player { padding-right: 10px; padding-left: 12px; }
  .bgm-control { width: 38px; min-width: 38px; }
}

@media (min-width: 621px) and (max-height: 760px) {
  .device-shell { height: calc(100vh - 20px); margin: 10px auto; }
  .menu-panel { inset: 8px; height: auto; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .boot { display: none; }
  .reveal { opacity: 1; transform: none; }
  .hero__video { opacity: 0 !important; }
  .hero__image img { opacity: 1 !important; }
}

.hero__intro,
.manifesto__body > p,
.archive__head > p,
.about__text > p,
.museum__copy > p:not(.eyebrow),
.agents__copy > p,
.collaboration__copy > p:last-child,
.record-dialog__copy > p {
  font-family: var(--prose);
  font-weight: 400;
  font-synthesis: none;
}

.hero__intro, .manifesto__body p, .archive__head p, .about__text p, .museum__copy p, .agents__copy p, .collaboration__copy p { text-wrap: pretty; overflow-wrap: break-word; }
html[lang="es"] p, html[lang="pt"] p, html[lang="sv"] p, html[lang="fi"] p, html[lang="et"] p { hyphens: auto; }