/* ================================================================
   ORIGAMI MONEY — 折り紙 · Geld · Դրամ
   extends style.css · crimson ground from the paintings, banknote
   green, folding-paper canvas, museum-label captions
   ================================================================ */

:root {
  --crimson: #b90f2b;          /* the painted ground */
  --crimson-deep: #7e0a1e;
  --bill: #e4e6d5;
  --bill-ink: #26402f;
  --bill-green: #56755c;
  --font-jp: "Shippori Mincho", serif;
  --font-hy: "Noto Serif Armenian", serif;
}

.om { background: var(--paper); }
[lang="ja"], [lang="zh"] { font-family: var(--font-jp); }
[lang="hy"] { font-family: var(--font-hy); }

/* the folding note lives on one fixed canvas above the content */
.om-paper {
  position: fixed;
  top: 0; left: 0;
  z-index: 40;
  pointer-events: none;
}

/* ================= HERO ================= */
.om-hero {
  position: relative;
  height: 640vh;
  background:
    radial-gradient(120% 90% at 50% 45%, #c8142f 0%, var(--crimson) 45%, #9a0c23 100%);
  color: var(--paper);
  overflow: clip; /* clip (not hidden) keeps sticky working; the title layer's negative margin would otherwise leak below the hero */
}
/* two sticky layers stacked on top of each other: sticky creates a
   stacking context, so the title (z 1) and HUD (z 45) sandwich the canvas (z 40) */
.om-hero-back,
.om-hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.om-hero-back { z-index: 1; margin-bottom: -100vh; margin-bottom: -100svh; }
.om-hero-stage { z-index: 45; pointer-events: none; }
.om-hero-eyebrow {
  position: absolute;
  z-index: 45;
  top: clamp(6.2rem, 13vh, 8.4rem);
  left: var(--pad);
  color: rgba(245, 241, 232, 0.82);
}

/* title sits under the canvas: the fish swims across it */
.om-title {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(9rem, 34vh, 20rem);
  font-weight: 600;
  font-size: clamp(3.6rem, 15.5vw, 15rem);
  letter-spacing: -0.035em;
  line-height: 0.82;
  text-transform: uppercase;
  pointer-events: none;
  color: var(--paper);
}
.om-title-line { display: block; overflow: hidden; padding: 0 0.04em; }
.om-title-line-2 { color: transparent; -webkit-text-stroke: 1.5px var(--paper); }
.om-title-word {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.om-title-line-2 .om-title-word { transition-delay: 0.08s; }
.om-hero.is-title .om-title-word { transform: none; }

/* fold meter */
.om-meter {
  position: absolute;
  z-index: 45;
  top: clamp(6rem, 13vh, 8.2rem);
  right: var(--pad);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.55rem;
}
.om-meter-n { font-size: 0.78rem; color: rgba(245, 241, 232, 0.7); }
.om-meter-n b { font-weight: 500; color: var(--paper); font-size: 1.7rem; letter-spacing: 0.02em; }
.om-meter-ticks { display: flex; gap: 4px; }
.om-meter-ticks i {
  width: 16px; height: 3px;
  background: rgba(245, 241, 232, 0.25);
  transition: background 0.4s;
}
.om-meter-ticks i.is-on { background: var(--paper); }
.om-meter-type { color: var(--paper); display: flex; align-items: center; gap: 0.6em; }
.om-meter-type::before {
  content: "";
  width: 30px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--paper) 0 7px, transparent 7px 12px);
}
.om-meter-type[data-type="mountain"]::before {
  background: repeating-linear-gradient(90deg, var(--paper) 0 9px, transparent 9px 12px, var(--paper) 12px 14px, transparent 14px 17px);
}
.om-meter-type[data-type="done"]::before { background: var(--paper); }

/* museum labels */
.om-labels {
  position: absolute;
  z-index: 45;
  left: var(--pad);
  bottom: clamp(1.5rem, 6vh, 3.5rem);
  width: min(370px, calc(100vw - 2 * var(--pad)));
  display: grid;
}
.om-label {
  grid-area: 1 / 1;
  background: var(--ink);
  color: var(--paper);
  padding: 1rem 1.2rem 1.15rem;
  border-left: 3px solid var(--crimson);
  box-shadow: 0 18px 40px rgba(40, 0, 10, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), visibility 0.5s;
}
.om-label.is-on { opacity: 1; visibility: visible; transform: none; }
.om-label figcaption { color: #e88a8d; margin-bottom: 0.45rem; }
.om-label p { font-size: 1.02rem; line-height: 1.45; }
.om-label em { color: #ffb9b0; }
.om-hero.is-title .om-labels { opacity: 0; transition: opacity 0.5s; }

.om-hint {
  position: absolute;
  z-index: 45;
  right: var(--pad);
  bottom: clamp(1.5rem, 6vh, 3.5rem);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--paper);
  transition: opacity 0.5s;
}
.om-hint-dash {
  width: 64px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--paper) 0 8px, transparent 8px 14px);
  background-size: 28px 2px;
  animation: om-dash 1.2s linear infinite;
}
@keyframes om-dash { to { background-position: 28px 0; } }
.om-hero.is-started .om-hint { opacity: 0; }

/* ================= SERIES ================= */
.om-series {
  position: relative;
  padding: clamp(6rem, 14vh, 11rem) var(--pad);
  max-width: 1250px;
}
.om-statement {
  font-size: clamp(1.9rem, 4.4vw, 3.7rem);
  font-weight: 410;
  line-height: 1.15;
  max-width: 24ch;
}
.om-series-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.6rem, 3vw, 3rem);
  margin-top: 3.4rem;
  max-width: 72rem;
}
.om-series-cols p { color: var(--ink-soft); }
.om-series-cols p::first-letter { color: var(--red); font-weight: 600; }
.om-series-cols em { color: var(--red); }

/* ================= MARQUEE ================= */
.om-marquee {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  overflow: hidden;
  padding: 1rem 0;
  background: var(--bill);
  color: var(--bill-ink);
}
.om-marquee-track { display: flex; white-space: nowrap; width: max-content; }
.om-marquee-track > span {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.7rem);
  font-style: italic;
  font-weight: 380;
}
.om-marquee-track i { font-style: normal; color: var(--crimson); padding: 0 0.35em; }

/* ================= TWO CULTURES ================= */
.om-cultures { padding: clamp(6rem, 14vh, 10rem) var(--pad); }
.om-cultures-head h2 { font-size: clamp(2.4rem, 6.5vw, 5.4rem); font-weight: 430; }
.om-cultures-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  margin-top: clamp(3rem, 8vh, 5rem);
  align-items: stretch;
}
.om-culture {
  border-top: 1px solid var(--ink);
  padding-top: 1.6rem;
}
.om-culture-art {
  background: var(--paper-deep);
  aspect-ratio: 11 / 8;
  display: grid;
  place-items: center;
  color: var(--ink);
  margin-bottom: 1.6rem;
  overflow: hidden;
  position: relative;
}
.om-culture-art svg {
  width: 62%;
  transition: transform 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}
.om-culture:hover .om-culture-art svg { transform: rotate(-4deg) scale(1.06); }
.om-culture-accent { stroke: var(--red); }
.om-culture-place { color: var(--red); }
.om-culture h3 { font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 440; margin: 0.6rem 0 0.2rem; }
.om-culture h3 [lang="ja"] { font-weight: 500; margin-right: 0.15em; }
.om-culture-sub { font-style: italic; color: var(--ink-soft); margin-bottom: 1rem; }
.om-culture p:last-child { color: var(--ink-soft); max-width: 46ch; }
.om-culture em { color: var(--red); }
.om-cultures-thread { display: flex; justify-content: center; }
.om-cultures-thread svg { width: 40px; height: 100%; overflow: visible; }
.om-cultures-thread path { fill: none; stroke: var(--red); stroke-width: 1.6px; vector-effect: non-scaling-stroke; }

/* ================= ZEITGEIST ================= */
.om-zeit {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(6rem, 14vh, 10rem) var(--pad);
}
.om-zeit-title {
  font-size: clamp(2.3rem, 6.4vw, 5.6rem);
  font-weight: 420;
  max-width: 17ch;
}
.om-zeit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(3rem, 8vh, 5rem);
  background: rgba(245, 241, 232, 0.2);
  border: 1px solid rgba(245, 241, 232, 0.2);
}
.om-zeit-card {
  position: relative;
  background: var(--ink);
  padding: clamp(1.6rem, 3vw, 3rem);
  min-height: clamp(280px, 38vh, 400px);
  display: flex;
  flex-direction: column;
  isolation: isolate;
  overflow: hidden;
}
.om-zeit-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--crimson);
  transform: translateY(100%);
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.18, 1);
}
.om-zeit-card:hover::before { transform: none; }
.om-zeit-icon {
  width: clamp(54px, 6vw, 80px);
  color: #e88a8d;
  margin-bottom: auto;
  transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1), color 0.4s;
}
.om-zeit-card:hover .om-zeit-icon { transform: rotate(-8deg) scale(1.08); color: var(--paper); }
.om-zeit-n { color: #e88a8d; margin-top: 2rem; transition: color 0.4s; }
.om-zeit-card:hover .om-zeit-n { color: var(--paper); }
.om-zeit-card h3 {
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  font-weight: 450;
  font-style: italic;
  margin: 0.5rem 0 0.8rem;
}
.om-zeit-card p { color: #b3ab99; max-width: 30ch; transition: color 0.4s; }
.om-zeit-card:hover p { color: var(--paper); }

/* ================= COLLECTION ================= */
.om-collection { background: var(--paper); overflow: hidden; }
.om-col-pin {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(6rem, 13vh, 8rem) 0 clamp(2rem, 5vh, 3rem);
}
.om-col-head { padding: 0 var(--pad); max-width: 1200px; }
.om-col-head h2 { font-size: clamp(2.2rem, min(5.2vw, 7vh), 4.4rem); font-weight: 430; max-width: 18ch; }
.om-col-sub { max-width: 52ch; margin-top: 1.1rem; color: var(--ink-soft); }
.om-col-track {
  list-style: none;
  display: flex;
  gap: clamp(1.4rem, 3vw, 2.8rem);
  padding: clamp(2rem, 5vh, 3.2rem) var(--pad) 1.4rem;
  width: max-content;
  will-change: transform;
}
.om-card {
  flex-shrink: 0;
  width: clamp(240px, min(26vw, 40vh), 380px);
  display: flex;
  flex-direction: column;
}
.om-card-work { --h: clamp(280px, min(33vw, 50vh), 470px); width: calc(var(--h) * var(--ar, 1)); }
.om-card-art {
  display: block;
  position: relative;
  aspect-ratio: var(--ar, 1);
  overflow: hidden;
  background: var(--crimson);
  box-shadow: 0 22px 50px rgba(60, 0, 12, 0.18);
}
.om-card-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.om-card-work .om-card-art:hover img { transform: scale(1.05); }
.om-card-ph .om-card-art {
  background: var(--bill);
  border: 1px solid rgba(38, 64, 47, 0.3);
  box-shadow: none;
  display: grid;
  place-items: center;
  color: var(--bill-ink);
  perspective: 600px;
}
.om-card-guilloche {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.om-card-guilloche path { fill: none; stroke: var(--bill-green); stroke-width: 0.5; opacity: 0.4; }
.om-card-ph .om-card-art::after {
  /* dashed crease diagram */
  content: "";
  position: absolute;
  inset: 12%;
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), rgba(185, 15, 43, 0.55) 50%, transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), rgba(185, 15, 43, 0.35) 50%, transparent calc(50% + 1px));
  border: 1px dashed rgba(38, 64, 47, 0.45);
  mask: repeating-linear-gradient(90deg, #000 0 9px, transparent 9px 15px);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 9px, transparent 9px 15px);
}
.om-card-sym {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(5rem, 9vw, 8rem);
  font-weight: 500;
  line-height: 1;
  color: var(--bill-ink);
  display: inline-block;
}
.om-card-stamp {
  position: absolute;
  z-index: 2;
  right: 1rem; bottom: 1rem;
  color: var(--crimson);
  border: 1.5px solid var(--crimson);
  padding: 0.3em 0.6em;
  transform: rotate(-6deg);
  font-size: 0.62rem;
}
.om-card-meta { padding-top: 1rem; display: flex; flex-direction: column; gap: 0.3rem; }
.om-card-n { color: var(--red); }
.om-card-meta h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 450; font-style: italic; }
.om-card-meta .mono:not(.om-card-n) { color: var(--ink-soft); }
.om-card-medium { color: var(--ink-soft); font-size: 0.95em; }
.om-card-link {
  align-self: flex-start;
  margin-top: 0.6rem;
  color: var(--red);
  border-bottom: 1px solid var(--red);
  padding-bottom: 0.2em;
}
.om-col-progress {
  margin: 0.8rem var(--pad) 0;
  height: 1px;
  background: var(--hair);
  max-width: 420px;
}
.om-col-progress span {
  display: block;
  height: 100%;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
}

/* ================= LIGHTBOX ================= */
.om-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(22, 8, 10, 0.92);
  opacity: 0;
  transition: opacity 0.35s ease;
  cursor: zoom-out;
}
.om-lightbox[hidden] { display: none; }
.om-lightbox.is-open { opacity: 1; }
.om-lightbox-fig {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 100%;
  transform: scale(0.96) translateY(12px);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.om-lightbox.is-open .om-lightbox-fig { transform: none; }
.om-lightbox img {
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  max-height: calc(100dvh - 9rem);
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  cursor: default;
}
.om-lightbox figcaption { display: flex; gap: 1rem; align-items: baseline; color: var(--paper); }
.om-lightbox figcaption .mono { color: #e88a8d; }
.om-lightbox figcaption strong { font-family: var(--font-display); font-style: italic; font-weight: 450; font-size: 1.4rem; }
.om-lightbox-close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 2.8rem; height: 2.8rem;
  border: 0;
  border-radius: 50%;
  background: var(--crimson);
  color: var(--paper);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.3s;
}
.om-lightbox-close:hover { transform: rotate(90deg); }

/* ================= PROCESS ================= */
.om-process {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  padding: clamp(6rem, 14vh, 10rem) var(--pad);
  background: var(--paper-deep);
  border-top: 1px solid var(--ink);
}
.om-process-img img { width: 100%; box-shadow: 0 24px 60px rgba(22, 19, 16, 0.18); }
.om-process-cap { margin-top: 0.9rem; color: var(--ink-soft); }
.om-process-text h2 { font-size: clamp(2.2rem, 5vw, 4.2rem); font-weight: 430; margin-bottom: 1.8rem; }
.om-process-text p { color: var(--ink-soft); margin-bottom: 1.2rem; max-width: 54ch; }
.om-process-text p em { color: var(--red); }

/* ================= UNFOLD ================= */
.om-unfold {
  position: relative;
  height: 300vh;
  background: radial-gradient(120% 90% at 50% 40%, #c8142f 0%, var(--crimson) 45%, #9a0c23 100%);
  color: var(--paper);
}
.om-unfold-stage {
  position: sticky;
  z-index: 45;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--pad) clamp(2rem, 7vh, 4.5rem);
}
.om-unfold-eyebrow {
  position: absolute;
  top: clamp(6.2rem, 13vh, 8.4rem);
  left: var(--pad);
  color: rgba(245, 241, 232, 0.8);
}
.om-unfold-title {
  position: relative;
  z-index: 45;
  font-size: clamp(2.4rem, 6.4vw, 5.6rem);
  font-weight: 440;
  line-height: 1;
  max-width: 16ch;
}
.om-unfold-title em { color: var(--paper); font-weight: 340; }
.om-unfold-cta {
  position: relative;
  z-index: 45;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: 1.8rem;
}
.om-unfold-cta p:first-child { max-width: 34ch; color: rgba(245, 241, 232, 0.86); }
.om-unfold-cta em { color: var(--paper); }
.om-btn {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--paper);
  border-radius: 999px;
  padding: 0.9em 1.6em;
  transition: background 0.3s, color 0.3s;
}
.om-btn:hover { background: var(--paper); color: var(--crimson); }
.om-unfold-ex { width: 100%; color: rgba(245, 241, 232, 0.6); }

/* ================= FOOTER ================= */
.om-foot {
  position: relative;
  z-index: 41; /* above the leaving note */
  background: var(--paper);
  padding: clamp(3rem, 7vh, 5rem) var(--pad) 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}
.om-foot-back { font-family: var(--font-display); font-size: clamp(1.5rem, 3.2vw, 2.4rem); }
.om-foot-back:hover { color: var(--red); }
.om-foot-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--hair);
  padding-top: 1.3rem;
  color: var(--ink-soft);
}
.om-foot-meta a:hover { color: var(--red); }

/* ================= RESPONSIVE ================= */
@media (max-width: 900px) {
  .om-series-cols { grid-template-columns: 1fr; gap: 1.2rem; }
  .om-cultures-grid { grid-template-columns: 1fr; }
  .om-cultures-thread { height: 70px; }
  .om-cultures-thread svg { width: 30px; }
  .om-zeit-grid { grid-template-columns: 1fr; }
  .om-zeit-card { min-height: 0; gap: 0; }
  .om-zeit-icon { margin-bottom: 0; }
  .om-process { grid-template-columns: 1fr; }
  .om-col-track {
    width: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .om-col-track::-webkit-scrollbar { display: none; }
  .om-card { scroll-snap-align: center; width: 72vw; }
  .om-card-work { width: 82vw; }
  .om-card-work + .om-card-work { width: 88vw; }
}

@media (max-width: 600px) {
  .om-hero { height: 560vh; }
  .om-hero-eyebrow { top: 5.6rem; max-width: 60vw; line-height: 1.7; }
  .om-meter { top: 5.4rem; }
  .om-meter-n b { font-size: 1.3rem; }
  .om-meter-ticks i { width: 9px; }
  .om-meter-type { font-size: 0.6rem; }
  .om-meter-type::before { width: 18px; }
  .om-labels { bottom: 1.2rem; }
  .om-label { padding: 0.8rem 1rem 0.9rem; }
  .om-label p { font-size: 0.92rem; }
  .om-hint { bottom: auto; top: 50%; right: 50%; transform: translate(50%, 0); display: none; }
  .om-title { gap: clamp(13rem, 40vh, 22rem); font-size: 17vw; }
  .om-title-line-2 { -webkit-text-stroke-width: 1px; }
}