.wrap-wide { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.ab-head { padding: clamp(40px, 5.5vw, 96px) 0 clamp(36px, 5vw, 86px); }
.ab-head h1 {
  margin: 0; max-width: none; color: var(--ink);
  font-family: var(--serif-display);
  font-size: clamp(24px, 3.125vw, 60px); line-height: 1.1; letter-spacing: 0;
}
.ab-head h1 .ln { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .ab-head h1 .ln { animation: bdRiseText .9s cubic-bezier(.22,1,.36,1) both; }
  .ab-head h1 .ln + .ln { animation-delay: .13s; }
}
.ab-values { padding: clamp(36px, 4.5vw, 72px) 0; }
.ab-values-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 28px; flex-wrap: wrap; margin-bottom: 36px;
}
.ab-values-head h2 {
  margin: 0; max-width: 1024px;
}
.btn.lg { font-size: 15px; padding: 13px 24px; margin-right: 0; flex-shrink: 0; }
.vs-list { list-style: none; margin: 0; padding: 0; position: relative; }
.vs-row {
  position: relative; padding: 32px 0;
  outline-offset: 4px;
}
.vs-row::before, .vs-list::after {
  content: ""; position: absolute; left: 0; right: 0;
  height: var(--tex-t); pointer-events: none; background: var(--line);
  -webkit-mask-image: var(--tex-h); mask-image: var(--tex-h);
  -webkit-mask-size: var(--tex-len) var(--tex-t); mask-size: var(--tex-len) var(--tex-t);
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
}
.vs-row::before { top: calc(var(--tex-t) / -2); }
.vs-list::after { bottom: calc(var(--tex-t) / -2); }
.vs-row-in { max-width: 640px; }
.vs-row h3 { color: var(--ink); }
.vs-row h3 {
  margin: 0 0 8px; font-family: var(--serif); font-weight: 400;
  font-size: clamp(21px, 1.9vw, 27px); line-height: 1.22; letter-spacing: -.2px;
}
.vs-row p {
  margin: 0; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6;
  color: var(--muted);
}
.ab-team { padding: clamp(36px, 4.5vw, 72px) 0 clamp(56px, 6vw, 96px); }
.ab-team h2 {
  margin: 0 0 36px;
}
.ab-team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.crew-card { display: block; text-decoration: none; color: inherit; outline-offset: 6px; }
.crew-card .shot {
  border-radius: 8px; overflow: hidden; background: var(--box);
  aspect-ratio: 480 / 559;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.crew-card .shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.crew-card .who { padding-top: 16px; }
.crew-card .nm, .crew-card .rl {
  margin: 0; color: var(--ink);
}
.crew-card .nm {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(21px, 1.9vw, 27px); line-height: 1.22; letter-spacing: -.2px;
}
.crew-card .rl { font-size: 16px; line-height: 1.6; }
.crew-card .rl { opacity: .4; transition: opacity .35s ease; }
.crew-card:hover .shot, .crew-card:focus-visible .shot { transform: translateY(-4px); }
.crew-card:hover .rl, .crew-card:focus-visible .rl { opacity: 1; }
.crew-card .shot { position: relative; }
.crew-card .shot canvas.dplate {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  pointer-events: none;
}
html.dplates .crew-card .shot:not(.ready) img { visibility: hidden; }
@media (max-width: 1100px) {
  .ab-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
}
@media (max-width: 900px) {
  .ab-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .crew-card .shot { border-radius: 8px; }
  .crew-card .who { padding-top: 10px; }
  .crew-card .nm { font-size: 18px; }
  .crew-card .rl { font-size: 14px; line-height: 1.45; }
  .crew-card .rl { opacity: 1; color: var(--muted); }
  .ab-values-head { margin-bottom: 24px; }
  .vs-row { padding: 24px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .crew-card .shot { transition: none; }
}
.crew-card .shot.pending {
  display: grid; place-items: center;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(35, 35, 35, .16);
}
.crew-card .shot.pending span {
  font-family: var(--serif-display); font-weight: 400;
  font-size: clamp(40px, 5.4vw, 76px); line-height: 1;
  color: var(--ink); opacity: .26; letter-spacing: .02em;
  transition: opacity .45s ease;
}
.crew-card:hover .shot.pending span,
.crew-card:focus-visible .shot.pending span { opacity: .42; }
.ab-scene { background: var(--brand-violet); }
.ab-scene .bs-stage > div { position: absolute; overflow: hidden; }
.ab-scene .bs-stage > div > img { position: absolute; display: block; image-rendering: pixelated; }
.ab-river  { left: -0.0240%; top: 43.0503%; width: 99.8802%; height: 77.8362%; }
.ab-river img { left: 0; top: -88.89%; width: 100%; height: 247.37%; }
.ab-mountain { left: -0.1198%; top: -26.8970%; width: 100%; height: 192.9376%; }
.ab-people { left: 48.8856%; top: 43.0503%; width: 11.5984%; height: 44.0271%; transform: scaleX(-1); }
.ab-people img { left: -81.88%; top: -0.33%; width: 181.88%; height: 100.66%; }
.ab-flags { left: 0; top: -128.3246%; width: 100.1438%; height: 202.8550%; }
@media (prefers-reduced-motion: no-preference) {
  .ab-scene[data-banner-parallax] .ab-mountain, .ab-scene[data-banner-parallax] .ab-river,
  .ab-scene[data-banner-parallax] .ab-people,   .ab-scene[data-banner-parallax] .ab-flags {
    animation-fill-mode: backwards; animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  }
  .ab-scene[data-banner-parallax] .ab-mountain { animation-name: ab-slide-mountain; animation-duration: 1.0s; }
  .ab-scene[data-banner-parallax] .ab-river    { animation-name: ab-slide-river;    animation-duration: 1.0s; animation-delay: .16s; }
  .ab-scene[data-banner-parallax] .ab-people   { animation-name: ab-slide-people;   animation-duration: 1.0s; animation-delay: 0s; }
  .ab-scene[data-banner-parallax] .ab-flags    { animation-name: ab-slide-flags;    animation-duration: 1.2s; animation-delay: .5s; }
  .ab-scene[data-banner-parallax]:not(.is-ready) .ab-mountain, .ab-scene[data-banner-parallax]:not(.is-ready) .ab-river,
  .ab-scene[data-banner-parallax]:not(.is-ready) .ab-people,   .ab-scene[data-banner-parallax]:not(.is-ready) .ab-flags {
    visibility: hidden; animation-name: none;
  }
}
.lf-wrap { position: relative; }
.lf-wrap.lf-live { height: 520vh; }
.lf-pin { position: relative; height: var(--H, 1200px); overflow-x: auto; overflow-y: hidden; }
.lf-live .lf-pin { position: sticky; top: var(--bar-h); height: var(--frame-h, calc(100svh - var(--bar-h))); overflow: hidden; }
.lf-stage { position: absolute; left: 0; top: 0; width: 1920px; height: var(--H, 1200px);
  transform-origin: 0 0; transform-style: preserve-3d; perspective: 3600px; will-change: transform; }
.lf-wrap.lf-live.settled { height: auto; }
.lf-wrap.lf-live.settled .lf-pin { position: relative; top: 0; height: var(--pin-h, 100vh); overflow: hidden; }
.lf-wrap.settled .lf-hint { display: none; }
.lf-back { position: absolute; left: 960px; top: 0; width: 960px; height: 100%;
  background: url(assets/about/origin/ground.jpg) center / cover no-repeat; }
.lf-tab { position: absolute; left: 960px; top: 170px; width: 36px; height: 270px;
  background: url(assets/about/origin/ground.jpg) right center / auto 900px no-repeat;
  clip-path: polygon(0 0, 100% 13.3%, 100% 86.7%, 0 100%); }
.lf-sheet { position: absolute; left: 0; top: 70px; bottom: 70px; width: 890px;
  background: rgba(255, 251, 242, .95);
  -webkit-mask: radial-gradient(circle 10px at 30px 50%, transparent 97%, #000 100%) 0 0 / 100% 76px repeat-y;
          mask: radial-gradient(circle 10px at 30px 50%, transparent 97%, #000 100%) 0 0 / 100% 76px repeat-y; }
.lf-sheet::before { content: ""; position: absolute; left: calc(76px - var(--tex-t) / 2); top: 0; bottom: 0; width: var(--tex-t);
  background: rgba(35, 35, 35, .9);
  -webkit-mask: var(--tex-v) 0 0 / var(--tex-t) var(--tex-len) repeat-y; mask: var(--tex-v) 0 0 / var(--tex-t) var(--tex-len) repeat-y; }
.lf-text { position: absolute; left: 132px; top: 64px; width: 700px; font-family: var(--serif); color: var(--ink); }
.lf-date { margin: 0 0 26px; font: 500 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.lf-to { position: relative; width: fit-content; margin: 0 auto 28px; padding-bottom: 5px;
  font: 500 13px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.lf-to::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--tex-t) / -2); height: var(--tex-t);
  background: rgba(35, 35, 35, .9);
  -webkit-mask: var(--tex-h) 0 0 / var(--tex-len) var(--tex-t) repeat-x; mask: var(--tex-h) 0 0 / var(--tex-len) var(--tex-t) repeat-x;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s ease; }
.lf-to.written::after { transform: none; }
.lf-p { margin: 0 0 15px; font-size: 19.5px; line-height: 31px; }
.lf-close { margin-top: 26px; font-size: 19.5px; line-height: 31px; }
.lf-close p { margin: 0; }
.lf-c.h { visibility: hidden; }
.lf-caret { position: absolute; left: 0; top: 0; width: 2px; height: 26px; background: var(--ink); pointer-events: none;
  animation: lf-blink 1s steps(1) infinite; }
.lf-caret.off { display: none; }
@keyframes lf-blink { 50% { opacity: 0; } }
.lf-wrap.settled .lf-sheet { cursor: zoom-in; transform-origin: 0 50%; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.lf-wrap.settled .lf-sheet:hover { transform: perspective(3000px) rotateY(-10deg); }
.lf-wrap.settled .lf-sheet:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }
html.lf-reading, html.lf-reading body { overflow: hidden; }
.lf-reader { position: fixed; inset: 0; z-index: 600; background: rgba(20, 13, 13, 0); transition: background .35s ease; }
.lf-reader.on { background: rgba(20, 13, 13, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lf-reader-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: 40px 0 60px; }
.lf-reader-box { position: relative; margin: 0 auto; transition: transform .85s cubic-bezier(.3, .8, .3, 1); }
.lf-sheet-copy { position: absolute !important; left: 0; top: 0 !important; bottom: auto !important; height: auto; transform-origin: 0 0;
  visibility: visible !important; cursor: auto; }
.lf-sheet-copy { min-height: 0; }
.lf-reader-close { position: fixed; top: 18px; right: 18px; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--black); background: var(--bg); color: var(--ink); font: 17px/1 var(--sans); cursor: pointer;
  opacity: 0; transition: opacity .25s ease .2s, background .15s ease, color .15s ease; }
.lf-reader.on .lf-reader-close { opacity: 1; }
.lf-reader-close:hover { background: var(--black); color: #fff; }
@media (prefers-reduced-motion: reduce) { .lf-reader-box, .lf-wrap.settled .lf-sheet { transition: none; } }
.lf-cover { position: absolute; left: 0; top: 0; width: 960px; height: 100%;
  transform-origin: 100% 50%; transform-style: preserve-3d; transform: rotateY(calc(var(--shut, 0) * 180deg)); }
.lf-face { position: absolute; inset: 0; transform-style: preserve-3d; }
.lf-inside { background: url(assets/about/origin/ground.jpg) center / cover no-repeat; }
.lf-inside::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to left, rgba(0,0,0,.07), rgba(102,102,102,0) 70%); }
.lf-wrap:not(.lf-live) .lf-outside { visibility: hidden; }
.lf-wait .lf-back, .lf-wait .lf-tab, .lf-wait .lf-inside, .lf-wait .lf-outside { background-image: none; }
.lf-outside { transform: rotateY(180deg); background: url(assets/about/origin/ground.jpg) center / cover no-repeat; }
.lf-terra { position: absolute; left: 70px; right: 0; top: 70px; bottom: 70px; background: rgba(234, 155, 124, .95); }
.lf-leaf { position: absolute; left: 360px; right: 0; top: 70px; bottom: 70px; transform-origin: 100% 50%;
  transform-style: preserve-3d; transition: transform .5s cubic-bezier(.22, 1, .36, 1); cursor: pointer; }
.lf-leaf.turned { transform: rotateY(180deg); }
.lf-leaf:not(.is-turning):hover { transform: rotateY(14deg); }
.lf-leaf.turned:not(.is-turning):hover { transform: rotateY(166deg); }
.lf-leaf:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }
.lf-lf { position: absolute; inset: 0; background: rgba(144, 203, 255, .95);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lf-lf.b { transform: rotateY(180deg); }
.lf-lf.b { visibility: hidden; }
.lf-leaf.hide-front .lf-lf.f { visibility: hidden; }
.lf-leaf.show-back .lf-lf.b { visibility: visible; }
.lf-terra, .lf-lf.f {
  -webkit-mask: radial-gradient(circle 10px at calc(100% - 26px) 50%, transparent 97%, #000 100%) 0 0 / 100% 76px repeat-y;
          mask: radial-gradient(circle 10px at calc(100% - 26px) 50%, transparent 97%, #000 100%) 0 0 / 100% 76px repeat-y; }
.lf-lf.b {
  -webkit-mask: radial-gradient(circle 10px at 26px 50%, transparent 97%, #000 100%) 0 0 / 100% 76px repeat-y;
          mask: radial-gradient(circle 10px at 26px 50%, transparent 97%, #000 100%) 0 0 / 100% 76px repeat-y; }
.lf-ph { position: absolute; margin: 0; }
.lf-ph img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.lf-ph figcaption { margin-top: 12px; font: 500 14px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: rgba(0,0,0,.7); }
.lf-hint { position: absolute; left: 0; right: 0; bottom: 22px; margin: 0; text-align: center; pointer-events: none;
  font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); transition: opacity .4s ease; }
.og-form {
  position: absolute; left: 110px; top: 190px; width: 660px; transform: scale(1.12); transform-origin: 0 0;
  --fink: rgba(35, 35, 35, .72); --fr-l: rgba(35, 35, 35, .66); --fr-h: rgba(35, 35, 35, .9);
  color: var(--fink); font-family: var(--mono); font-size: 12px; line-height: 1.35;
  letter-spacing: .04em; text-transform: uppercase;
}
.og-form > div, .og-f-head-l, .og-f-head-l span, .og-f-head-r, .og-f-box, .og-f-ledger td, .og-f-stubs span { position: relative; }
.lf-fr { position: absolute; pointer-events: none; background: var(--fr-l); }
.lf-fr.h { left: 0; right: 0; height: var(--tex-t);
  -webkit-mask-image: var(--tex-h); mask-image: var(--tex-h);
  -webkit-mask-size: var(--tex-len) var(--tex-t); mask-size: var(--tex-len) var(--tex-t);
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; }
.lf-fr.v { top: 0; bottom: 0; width: var(--tex-t);
  -webkit-mask-image: var(--tex-v); mask-image: var(--tex-v);
  -webkit-mask-size: var(--tex-t) var(--tex-len); mask-size: var(--tex-t) var(--tex-len);
  -webkit-mask-repeat: repeat-y; mask-repeat: repeat-y; }
.lf-fr.h.top { top: calc(var(--tex-t) / -2); }
.lf-fr.h.bot { bottom: calc(var(--tex-t) / -2); }
.lf-fr.h.mid { top: 50%; margin-top: calc(var(--tex-t) / -2); }
.lf-fr.v.left { left: calc(var(--tex-t) / -2); }
.lf-fr.v.right { right: calc(var(--tex-t) / -2); }
.og-f-cap { font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: .08em; }
.og-f-note { padding: 0 0 10px; font-size: 11px; }
.og-f-note .lf-fr.r1 { bottom: 2px; background: var(--fr-h); }
.og-f-note .lf-fr.r2 { bottom: -4px; background: var(--fr-h); }
.og-f-note b { font-family: var(--sans); font-weight: 800; font-size: 20px; letter-spacing: .02em; margin-right: 10px; vertical-align: -2px; }
.og-f-note span { font-family: var(--mono); text-transform: none; letter-spacing: .02em; }
.og-f-head { display: grid; grid-template-columns: 1fr 44px 86px; margin-top: 18px; }
.og-f-head > .lf-fr.top, .og-f-head > .lf-fr.bot { background: var(--fr-h); }
.og-f-head-l { display: grid; grid-template-rows: 44px 44px; text-align: center; }
.og-f-head-l span { display: flex; align-items: center; justify-content: center; }
.og-f-head-l span .lf-fr.bot { background: var(--fr-h); }
.og-f-head-l > .lf-fr.right { background: var(--fr-h); }
.og-f-head-r { grid-column: 3; }
.og-f-ledger { display: grid; grid-template-columns: 1fr 150px; margin-top: 90px; }
.og-f-ledger table { border-collapse: collapse; width: 100%; }
.og-f-ledger td { height: 38px; padding: 0 10px; font-family: var(--mono); font-size: 12.5px; text-transform: none; letter-spacing: .02em; white-space: nowrap; }
.og-f-ledger td::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--tex-t) / -2); height: var(--tex-t); background: var(--fr-l);
  -webkit-mask-image: var(--tex-h); mask-image: var(--tex-h);
  -webkit-mask-size: var(--tex-len) var(--tex-t); mask-size: var(--tex-len) var(--tex-t);
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; }
.og-f-ledger tr:last-child td::after { display: none; }
.og-f-ledger td:first-child { width: 72px; text-align: right; letter-spacing: .1em; }
.og-f-ledger > .lf-fr.col { left: 92px; }
.og-f-box {
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--sans); font-weight: 800; font-size: 15px; line-height: 1.3; letter-spacing: .06em;
}
.og-f-sig { margin-top: 10px; padding-bottom: 28px; font-size: 10.5px; text-transform: none; letter-spacing: .02em; }
.og-f-serial { margin-top: 18px; padding: 0 0 8px; }
.og-f-serial .og-f-cap { display: block; font-size: 11px; margin-bottom: 8px; }
.og-f-num { display: block; font-family: var(--mono); font-weight: 500; font-size: 44px; line-height: 1; letter-spacing: .06em; color: rgba(35,35,35,.8); }
.og-f-num b { font-weight: 700; margin-right: 6px; }
.og-f-stubs { display: grid; grid-template-columns: 110px repeat(8, 1fr); height: 52px; margin-top: 4px; }
.og-f-stubs span { display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 26px; text-transform: none; }
.og-f-stubs span::before, .og-f-stubs span:last-child::after { content: ""; position: absolute; top: 0; bottom: 0; width: var(--tex-t); background: var(--fr-l);
  -webkit-mask-image: var(--tex-v); mask-image: var(--tex-v);
  -webkit-mask-size: var(--tex-t) var(--tex-len); mask-size: var(--tex-t) var(--tex-len);
  -webkit-mask-repeat: repeat-y; mask-repeat: repeat-y; }
.og-f-stubs span::before { left: calc(var(--tex-t) / -2); }
.og-f-stubs span:last-child::after { right: calc(var(--tex-t) / -2); }
.og-f-head-r { display: grid; grid-template-rows: 44px 44px; text-align: center; }
.og-f-head-r span { display: flex; align-items: center; justify-content: center; }
.og-f-index { margin: 40px 0 10px; }
.og-f-ledger > .lf-fr.col { left: 72px; }
.og-f-ledger td + td { padding-left: 18px; }
.og-f-ink { position: absolute; right: 8px; bottom: 6px; font: 30px/1 'Ms Madi', cursive; color: #5A4BC8; text-transform: none; letter-spacing: 0; }
@media (max-width: 900px) {
  .lf-text { left: 104px; width: 590px; top: 52px; }
  .lf-date, .lf-to { font-size: 17px; }
  .lf-p, .lf-close { font-size: 30px; line-height: 46px; }
  .lf-p { margin-bottom: 22px; }
  .lf-ph figcaption { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .lf-leaf { transition: none; } .lf-caret { animation: none; } }