*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--void);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.9;
  letter-spacing: 0.03em;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--amber); color: var(--void); }

img, svg, picture { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }

a { color: inherit; text-decoration: none; }
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip {
  position: absolute;
  left: var(--space-md);
  top: -4rem;
  z-index: calc(var(--z-shutter) + 1);
  padding: var(--space-sm) var(--space-md);
  background: var(--ink);
  color: var(--void);
  font-size: var(--text-sm);
  transition: top var(--dur-micro) var(--ease-out);
}
.skip:focus { top: var(--space-md); }

.plate {
  font-size: var(--text-plate);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: var(--track-plate);
  text-transform: uppercase;
  color: var(--dim);
}

.frame { position: relative; overflow: clip; }
.frame__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.section-h {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-section);
  line-height: 1.02;
  letter-spacing: 0.02em;
  margin-top: var(--space-sm);
}

.prose { max-width: 36em; }
.prose p:last-child { text-wrap: balance; }



.prose p {
  margin-top: var(--space-lg);
  color: var(--quiet);
  font-size: clamp(0.875rem, 1vw, 1rem);
  line-height: 1.9;
}
.prose strong {
  font-weight: 500;
  color: var(--ink);




  white-space: nowrap;
}

.rule-x {
  display: block;
  height: 1px;
  background: linear-gradient(to right, var(--amber), rgb(255 181 74 / 0));
}

.band { position: relative; padding-block: clamp(5rem, 14svh, 9rem); }



.masthead {
  position: fixed;
  z-index: var(--z-raised);
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: clamp(1.1rem, 3.4svh, 2rem) var(--gutter);
  pointer-events: none;
}
.masthead > * { pointer-events: auto; }
html:not(.js) .masthead { position: absolute; }
.masthead__mark {
  display: block;
  width: clamp(22px, 2.6vw, 34px);
  color: var(--paper-ink);
}
.masthead__mark svg { width: 100%; height: auto; fill: currentColor; }
.masthead__nav {
  display: flex;
  gap: clamp(0.9rem, 2.4vw, 2.2rem);
  font-size: var(--text-plate);
  letter-spacing: var(--track-plate);
  color: var(--paper-dim);
}

.masthead__nav a {
  transition: color var(--dur-micro) var(--ease-out), opacity var(--dur-micro) var(--ease-out);
}
.masthead__nav a:hover { color: var(--paper-ink); }

.masthead__menu {
  display: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--text-plate);
  letter-spacing: var(--track-plate);
  text-transform: uppercase;
  color: var(--paper-dim);
  cursor: pointer;
}


.hero {
  position: relative;
  height: 100svh;
  min-height: 34rem;
  overflow: clip;
  background: #f4f1ee;
}
.hero__media, .hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__img {
  object-fit: cover;
  object-position: 50% 50%;
}
html:not(.js) .hero__media {
  -webkit-mask-image: linear-gradient(to bottom, #000 0 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0 86%, transparent 100%);
}











.hero__veil {
  position: absolute;
  left: -1px;
  right: -1px;
  top: 0;
  height: 155%;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(var(--bow) at var(--bow-at),
    transparent           0 72.09%,
    rgb(10 10 10 / 0.72)    74.19%,
    var(--void)             76.29%,
    var(--void)             100%);
  -webkit-mask-image: radial-gradient(8% 11% at var(--tape-l) 28%, transparent 0 42%, #000 100%);
          mask-image: radial-gradient(8% 11% at var(--tape-l) 28%, transparent 0 42%, #000 100%);
  transform: translate3d(0, 100%, 0);
}





.hero__veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--bow) at var(--bow-at),
    rgb(var(--dk-edge) / 0)    0 70.2%,
    rgb(var(--dk-edge) / 0.30)   71.9%,
    rgb(var(--dk-edge) / 0)      73.8%);
  -webkit-mask-image: radial-gradient(38% 120% at var(--tape-l) 50%,
    #000 0%, rgb(0 0 0 / 0.62) 34%, rgb(0 0 0 / 0.18) 68%, transparent 100%);
          mask-image: radial-gradient(38% 120% at var(--tape-l) 50%,
    #000 0%, rgb(0 0 0 / 0.62) 34%, rgb(0 0 0 / 0.18) 68%, transparent 100%);
}
.hero__veil::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.62;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='g' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.56 0 0 0 0 0.53 0 0 0 0 0.47 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='1.5' intercept='-0.45'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  -webkit-mask-image: radial-gradient(var(--bow) at var(--bow-at),
    transparent 0 68.6%, #000 72.4%, #000 76.0%, transparent 81.1%);
          mask-image: radial-gradient(var(--bow) at var(--bow-at),
    transparent 0 68.6%, #000 72.4%, #000 76.0%, transparent 81.1%);
}
.hero {
  --dk-edge: 255 181 74;
  --dk-travel: 1.55;
  --dk-lead: 1.465;
  --dk-span: 0.78;
  --bow:    175% 62%;
  --bow-at: 62% -16%;


  --dk-bow: 0.2254;
  --flip-k: 150;
}


.hero__after {
  position: absolute;
  z-index: 2;
  top: 0;
  left: var(--tape-l);
  width: clamp(15rem, 36svh, 25rem);
  height: clamp(19rem, 46svh, 32rem);
  translate: -50% -34%;
  background: radial-gradient(ellipse 50% 56% at 50% 50%,
    rgb(255 226 178 / 0.22) 0%,
    rgb(255 205 130 / 0.085) 40%,
    rgb(255 205 130 / 0.03) 66%,
    transparent 94%);
  opacity: 0;
  pointer-events: none;
}

.hero__copy {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(1.75rem, 7svh, 3.5rem);
}
.hero__scale {
  display: block;
  margin-bottom: clamp(0.9rem, 2.6svh, 1.5rem);
  color: var(--paper-dim);
}
.hero__scale i {
  display: block;
  width: var(--w);
  max-width: 26rem;
  height: 1px;
  margin-bottom: 0.42rem;
  background: currentColor;
  opacity: 0.5;
  transform-origin: 0 50%;
}
.hero__scale i:last-child { margin-bottom: 0; }
.hero__scale i:nth-child(2),
.hero__scale i:nth-child(3) { display: none; }
.hero__scale i:nth-child(1) { margin-bottom: 0.62rem; }
.js .hero__scale i:nth-child(4) {
  animation-delay: 0.26s;
}
.hero__kicker {
  margin: 0 0 0.7em;
  font-size: var(--text-kicker);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--paper-ink);
}

.hero__catch {
  font-weight: 500;
  font-size: calc(var(--text-hero) * 0.82);
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--paper-ink);
}
.hero__catch-en,
.hero__catch-jp { display: block; }
.hero__catch-jp { font-weight: 300; margin-top: 0.34em; }



.hero__scroll {
  position: absolute;
  z-index: 3;
  right: var(--gutter);
  bottom: clamp(1.75rem, 7svh, 3.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  color: var(--paper-dim);
}
.hero__scroll-t {
  writing-mode: vertical-rl;
  font-size: 0.625rem;
  line-height: 1;
  letter-spacing: 0.42em;
  text-indent: 0;
  padding-bottom: 0.42em;
  margin-bottom: -0.42em;
  text-transform: uppercase;
}
.hero__scroll-l {
  position: relative;
  display: block;
  width: 1px;
  height: clamp(2.4rem, 6svh, 3.6rem);
  overflow: clip;

  background: color-mix(in srgb, currentColor 34%, transparent);
}

@media (max-width: 30rem) {
  .hero__scroll { gap: 0.6rem; }
  .hero__scroll-t { letter-spacing: 0.3em; }
}

@media (max-width: 30rem) {
  .hero__kicker { letter-spacing: 0.16em; }
  .hero__scale i { margin-bottom: 0.34rem; }
  .hero__scale i:nth-child(1) { margin-bottom: 0.5rem; }
}
@media (max-width: 26rem) {
  .hero { --text-hero: clamp(1.5rem, 7.4vw, 2rem); }
}



.connect {
  position: relative;
  min-height: 100svh;
  overflow: clip;
}
.cam {
  position: absolute;
  top: 50%;
  left: 48%;
  translate: -50% -50%;
  height: var(--box);
  aspect-ratio: 1;
  z-index: 0;
}
.field-label,
.constel__legend { z-index: 2; }
.constel,
.field {
  position: absolute;
  inset: 0;
}
.field { z-index: 0; }
.field__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.field .nb { position: absolute; inset: 0; }
.field .nb path { stroke-dasharray: 0.28 0.36; stroke-dashoffset: 0; }


.node,
.zone {


  paint-order: stroke fill;
  -webkit-text-stroke: 0.09em var(--void);
}
.node.cn-node { position: absolute; }
.node.nw-node {
  position: absolute;
  font-size: calc(var(--fs-node) * var(--ns, 1));
}
.constel { z-index: 1; }
.constel__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}


.constel__lines path {
  fill: none;
  stroke-dasharray: 0.28 0.36;
  stroke-dashoffset: 0;
}
.ln-glow path,
.ln-core path { fill: none; }
.ln-glow path { stroke-width: 0.85; opacity: 0.065; }
.ln-core path {
  stroke-width: 0.17;
  opacity: 0.46;
}


.ln-core path.ln-dash {
  stroke-width: 0.105;
  stroke-dasharray: none;
  opacity: 0.42;
}
.ln-core path.ln-dash.ln--m1 { stroke-width: 0.125; opacity: 0.5; }
.ln-core path.ln-dash.ln--m3 { stroke-width: 0.09;   opacity: 0.34; }
.ln--m1 { --mag-speed-ln: 13; --mag-lead-ln: -0.01; }
.ln--m3 { --mag-speed-ln: 7; --mag-lead-ln: 0.01; }
.ln-glow path.ln--m1 { stroke-width: 1.15; opacity: 0.10; }
.ln-core path.ln--m1 { stroke-width: 0.24; opacity: 0.60; }
.ln-glow path.ln--m3 { stroke-width: 0.6; opacity: 0.045; }
.ln-core path.ln--m3 { stroke-width: 0.11; opacity: 0.32; }








.tb {
  --tone: calc(0.72 - var(--i) * 0.02);
  opacity: var(--tone);
  stroke-width: calc(0.135 - var(--i) * 0.005);
}
.tx circle { fill: var(--amber); }
.tx--t2 { opacity: 0.74; }
.tx--t3 { opacity: 0.52; }
.tx path {
  fill: none;
  stroke: var(--amber);
  opacity: 0.5;
  stroke-dasharray: 0.28 0.36;
  stroke-dashoffset: 0;
}

.txw { position: absolute; inset: 0; }
.txw__w {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  font-size: calc(var(--text-txw) * (1 - var(--i, 0) * 0.0133));
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.34em;
  white-space: nowrap;
}
.txw__w--a { color: var(--dim); }
.txw__w--b { color: var(--faint); }

.star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  border-radius: 50%;
}
.star--m1 {
  --star-op: 1;
  --mag-speed: 12;
  --mag-lead: -0.0075;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  background: radial-gradient(circle, var(--amber-2) 0 16%, rgb(255 181 74 / 0.85) 45%, rgb(255 181 74 / 0) 78%);
}
.star--m2 {
  --star-op: 0.85;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: radial-gradient(circle, var(--amber-2) 0 22%, rgb(255 181 74 / 0.55) 46%, rgb(255 181 74 / 0) 70%);
}
.star--m3 {
  --star-op: 0.65;
  --mag-speed: 5.2;
  --mag-lead: 0.01;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: radial-gradient(circle, var(--amber-2) 0 30%, rgb(255 181 74 / 0.4) 42%, rgb(255 181 74 / 0) 58%);
}

.zone, .node {
  position: absolute;
  left: var(--x);
  top: var(--y);
}

.zone {
  translate: -50% -50%;
  font-size: var(--fs-zone);
  font-weight: 300;
  letter-spacing: 0.42em;
  color: var(--dim);
  white-space: nowrap;
}
.node {
  position: relative;
  translate: -0.105em calc(-100% - 0.29em);
  font-family: var(--font-jp-display);
  font-size: var(--fs-node);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.32em;
  color: var(--ink);
  white-space: nowrap;
}
.node__dot {
  font-size: 0.6em;
  letter-spacing: 0;
  opacity: 0.55;
}
.node::after {
  content: "";
  position: absolute;
  left: 0.105em;
  bottom: -0.29em;
  width: 1px;
  height: 0.29em;
  background: var(--dim);
  opacity: 0.4;
}





.field-label {
  position: absolute;
  left: var(--gutter);
  bottom: var(--plate-bottom);
  margin: 0;
  white-space: nowrap;
  font-size: clamp(0.5625rem, 0.78vw + 0.28rem, 0.6875rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  color: var(--dim);
}
.field-label__n {
  margin-right: 0.5em;
  color: var(--amber);
  opacity: 0.72;
}

.connect {
  --plate-bottom: clamp(1.5rem, 4svh, 2.5rem);

  --brief-in: clamp(0rem, 13vw, 19rem);
  --brief-up: clamp(0rem, 9svh, 7rem);
  --copy-w: min(27rem, calc(100vw - 2 * var(--gutter)));
  --copy-h: 21.5rem;
  --box: min(calc(100svh - 6rem), calc(92vw - 2 * var(--gutter)));
  --fs-node: min(calc(var(--box) * 0.0378), 1.9rem);
  --fs-zone: min(calc(var(--box) * 0.01244), 0.625rem);
}




.field-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--void) 0, transparent 8rem),
    radial-gradient(5.5rem 7.5rem at 0% 50%, var(--void) 0 62%, transparent 100%);
}

.field-scrim::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(var(--gutter) + var(--brief-in) + var(--copy-w) + 7rem);
  height: calc(var(--plate-bottom) + var(--brief-up) + var(--copy-h) + 7rem);
  background: linear-gradient(to top, var(--void) 0 73%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 0 calc(100% - 190px), transparent 100%);
          mask-image: linear-gradient(to right, #000 0 calc(100% - 190px), transparent 100%);
}

.constel__legend {
  position: absolute;
  left: calc(var(--gutter) * 0.34);
  top: 50%;
  translate: 0 -50%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.55em;
  writing-mode: vertical-rl;
  font-size: 0.625rem;
  letter-spacing: var(--track-plate);
  color: var(--dim);
}
.constel__legend-dot {
  flex: none;
  border-radius: 50%;
  background: var(--amber-2);
}
.constel__legend-dot--1 { width: 6px; height: 6px; opacity: 1; }
.constel__legend-dot--2 { width: 4px; height: 4px; opacity: 0.85; }
.constel__legend-dot--3 { width: 2.5px; height: 2.5px; opacity: 0.65; }
.constel__legend-label { margin-top: 0.15em; }



.about-pin {
  position: relative;
  overflow: clip;
  background: var(--void);
  isolation: isolate;
}
.about__silver {
  position: absolute;
  right: 0;
  top: 0;
  width: 100vw;
  height: 100%;
  background: var(--void);
  clip-path: inset(0 0 0 48%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.about__frame {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--void);
}
.about__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}






.about__wave {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background-image: url("../img/about-web-16x9.jpg");
  background-image: image-set(url("../img/about-web-16x9.webp") type("image/webp"),
                              url("../img/about-web-16x9.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.about__wave--1 {
  -webkit-mask-image:
    radial-gradient(ellipse 12% 15% at 76% 27%, #000 0%, rgb(0 0 0 / 0.88) 32%, rgb(0 0 0 / 0.40) 64%, transparent 88%),
    radial-gradient(ellipse 9% 12% at 80% 34%, #000 0%, rgb(0 0 0 / 0.70) 36%, transparent 84%);
          mask-image:
    radial-gradient(ellipse 12% 15% at 76% 27%, #000 0%, rgb(0 0 0 / 0.88) 32%, rgb(0 0 0 / 0.40) 64%, transparent 88%),
    radial-gradient(ellipse 9% 12% at 80% 34%, #000 0%, rgb(0 0 0 / 0.70) 36%, transparent 84%);
}
.about__wave--2 {
  -webkit-mask-image:
    radial-gradient(ellipse 20% 24% at 91% 63%, #000 0%, rgb(0 0 0 / 0.86) 28%, rgb(0 0 0 / 0.40) 62%, transparent 88%),
    radial-gradient(ellipse 16% 13% at 85% 48%, #000 0%, rgb(0 0 0 / 0.72) 32%, transparent 84%);
          mask-image:
    radial-gradient(ellipse 20% 24% at 91% 63%, #000 0%, rgb(0 0 0 / 0.86) 28%, rgb(0 0 0 / 0.40) 62%, transparent 88%),
    radial-gradient(ellipse 16% 13% at 85% 48%, #000 0%, rgb(0 0 0 / 0.72) 32%, transparent 84%);
}
.about__wave--3 {
  -webkit-mask-image:
    radial-gradient(ellipse 25% 18% at 47% 51%, #000 0%, rgb(0 0 0 / 0.85) 26%, rgb(0 0 0 / 0.38) 60%, transparent 87%),
    radial-gradient(ellipse 17% 16% at 62% 40%, #000 0%, rgb(0 0 0 / 0.68) 34%, transparent 84%);
          mask-image:
    radial-gradient(ellipse 25% 18% at 47% 51%, #000 0%, rgb(0 0 0 / 0.85) 26%, rgb(0 0 0 / 0.38) 60%, transparent 87%),
    radial-gradient(ellipse 17% 16% at 62% 40%, #000 0%, rgb(0 0 0 / 0.68) 34%, transparent 84%);
}
.about__wave--4 {
  -webkit-mask-image:
    radial-gradient(ellipse 26% 22% at 19% 44%, #000 0%, rgb(0 0 0 / 0.84) 24%, rgb(0 0 0 / 0.36) 58%, transparent 88%),
    radial-gradient(ellipse 16% 19% at 11% 26%, #000 0%, rgb(0 0 0 / 0.62) 32%, transparent 85%);
          mask-image:
    radial-gradient(ellipse 26% 22% at 19% 44%, #000 0%, rgb(0 0 0 / 0.84) 24%, rgb(0 0 0 / 0.36) 58%, transparent 88%),
    radial-gradient(ellipse 16% 19% at 11% 26%, #000 0%, rgb(0 0 0 / 0.62) 32%, transparent 85%);
}
.about__col {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  align-content: center;
  justify-items: start;
  width: min(100%, 42vw);
  padding: clamp(4rem, 11svh, 7rem) 0 clamp(4rem, 11svh, 7rem) clamp(5rem, 9vw, 9rem);
}
.about__col .plate { margin-bottom: var(--space-2xs); }
.about__col .section-h { margin-bottom: clamp(2.25rem, 5svh, 3rem); position: relative; }
.about__col .section-h::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.55em;
  width: 3.6rem;
  height: 1px;
  background: linear-gradient(to right, var(--amber), rgb(255 181 74 / 0));
}

.about__lead {
  margin-bottom: clamp(2rem, 4svh, 3rem);
  font-family: var(--font-jp-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 3.7vw, 3.6rem);
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.about__line { display: block; }
.about__line > span { display: block; }
.about__rule {
  display: block;
  margin-top: clamp(1.5rem, 4svh, 2.5rem);
  width: min(100%, 22rem);
  height: 1px;
  background: linear-gradient(to right, var(--amber), rgb(255 181 74 / 0));
  transform-origin: left center;
}

@media (max-width: 47.99rem), (pointer: coarse) and (max-width: 63.99rem) {
  .about-pin { overflow: clip; }
  .about__silver {
    right: auto;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: none;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .about__silver::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
      rgb(10 10 10 / 0.58) 0%,
      rgb(10 10 10 / 0.84) 26%,
      rgb(10 10 10 / 0.93) 100%);
  }
  .about__col {
    width: 100%;
    height: 100%;
    align-content: center;
    padding: clamp(1.5rem, 4svh, 2.5rem) var(--gutter);
  }
  .about__lead { font-size: clamp(1.6rem, 7.4vw, 2.2rem); }
}

.stage--work { margin-top: clamp(6rem, 22svh, 13rem); }
.work-pin {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--space-md);
  padding: clamp(3rem, 9svh, 5.5rem) 0 clamp(1.5rem, 4svh, 2.5rem);
}
.work-head { padding-inline: var(--gutter); }
.work-head__lede {
  margin-top: var(--space-lg);
  max-width: 26em;
  font-size: var(--wd-note);
  line-height: 1.9;
  color: var(--quiet);
}
.work-head__h {
  margin-top: calc(var(--space-md) * 2);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  line-height: 1;
  letter-spacing: 0.03em;
}

.work__count {
  padding-inline: var(--gutter);
  font-size: var(--text-plate);
  letter-spacing: var(--track-plate);
  color: var(--quiet);
}
.work__count-n {
  position: relative;
  display: inline-block;
  font-variant-numeric: tabular-nums;
}
.work__count-n > span { display: block; }
.work__count-n > span + span { position: absolute; inset: 0; opacity: 0; }
.work__count-rule {
  display: block;
  margin-top: var(--space-xs);
  width: min(100%, 16rem);
  height: 1px;
  background: var(--amber);
  opacity: 0.45;
  transform-origin: left center;
}

.work { display: grid; gap: clamp(3rem, 8svh, 5rem); }
.work__panel { position: relative; padding-inline: var(--gutter); }



.work__no {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--no, var(--text-numeral));
  line-height: 0.74;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums;
  color: var(--ink);
  opacity: 0.9;
}

.work__en {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--wd-en);
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.work__jp {
  margin-top: var(--space-2xs);
  font-size: var(--wd-jp);

  line-height: 1;
  letter-spacing: 0.16em;
  color: var(--amber);
}
.work__lead {
  margin-bottom: calc(var(--space-md) * 2);
  font-family: var(--font-jp-display);
  font-weight: 500;
  font-size: var(--wd-lead);
  line-height: 1.38;
  letter-spacing: 0.04em;
  color: var(--ink);
}


.work__rule {
  display: block;
  margin: var(--space-sm) 0 calc(var(--space-sm) * 3);
  width: 3.5rem;
  height: 1px;
  background: var(--amber);
  transform-origin: left center;
}

.work__note {
  max-width: 26em;
  font-size: var(--wd-note);
  line-height: 1.9;
  color: var(--quiet);
}
.wp2__wire {
  display: block;
  width: 100%;
  aspect-ratio: 120 / 100;
  margin-bottom: var(--space-lg);
  color: var(--amber);
  pointer-events: none;
}
.wp2__wire-l path { vector-effect: non-scaling-stroke; }
.wp2__wire-l { stroke-width: 1px; opacity: 0.34; }
.wp2__wire-l .wp2__wire--x { opacity: 0.58; }
.wp2__wire-n { opacity: 0.5; }


.wp1__plate, .wp4__plate, .wp3__plate { position: relative; overflow: clip; }
.wp1__plate picture, .wp4__plate picture, .wp3__plate picture,
.wp1__plate img, .wp4__plate img, .wp3__plate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.light {
  position: relative;
  display: grid;
  min-height: 78svh;
  padding: 0;
  background: var(--paper);
  color: var(--paper-ink);
  text-align: center;
  overflow: clip;
}
.light__room {
  position: relative;
  z-index: var(--z-plate);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(1.2rem, 3.4svh, 2.2rem);
  padding: clamp(4rem, 12svh, 7rem) var(--gutter);
  background: var(--paper);
  width: 100%;
  height: 100%;
}
.light__plate { color: var(--paper-dim); }
.light__h {
  font-family: var(--font-jp-display);
  font-weight: 500;
  font-size: var(--text-light);
  line-height: 1.26;
  letter-spacing: 0.06em;
  color: var(--paper-ink);
}
@media (max-width: 26rem) {
  .light__h { letter-spacing: 0.02em; }
}
.light__en {
  margin-top: calc(var(--space-xs) * -1);
  font-size: var(--text-plate);
  font-weight: 300;
  letter-spacing: var(--track-plate);
  text-transform: uppercase;
  color: var(--paper-dim);
}

@media (max-width: 26rem) {
  .light__plate, .light__en { letter-spacing: 0.12em; }
}
.blade { display: none; }






.band--contact {
  padding-block-start: clamp(3rem, 8svh, 5rem);
  padding-block-end: clamp(1.5rem, 5svh, 3.25rem);
  display: grid;
  justify-items: stretch;
  gap: clamp(3rem, 9svh, 6rem);
  padding-inline: var(--gutter);
  overflow: clip;
}
.close-line {
  display: block;
  width: clamp(6rem, 12vw, 9.5rem);
  height: 1px;
  margin-bottom: clamp(1.5rem, 4svh, 2.5rem);
  background: linear-gradient(to right, rgb(255 217 160 / 0.9), rgb(255 181 74 / 0));
}
.close-words {
  text-align: left;
  display: grid;
  justify-items: start;
  gap: clamp(1.8rem, 5svh, 3rem);
  width: 100%;
  max-width: 84rem;
  margin-inline: auto;
  --bleed: max(0px, calc((100vw - 2 * var(--gutter) - 84rem) / 2));
}
.close-lede {
  display: grid;
  justify-items: start;
  gap: var(--space-md);
  max-width: 36rem;
}



.colophon__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2.5rem, 9vw, 10.5rem);
  align-items: start;
  width: 100%;
  max-width: 84rem;
}
.close__h {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-section);
  line-height: 1;
  letter-spacing: 0.02em;
}
.close__jp { color: var(--quiet); font-size: var(--text-md); }




.close-colhead {
  width: 100%;
  margin: 0 0 var(--space-lg);
  font-size: var(--text-plate);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: var(--track-plate);
  color: var(--dim);
}

.close-form {
  position: relative;
  width: 100%;
}
.close-form { --labw: 6.9rem; }

.close-field { width: 100%; }
.close-field + .close-field { margin-top: var(--space-md); }
.close-field__row {
  display: grid;
  grid-template-columns: var(--labw) minmax(0, 1fr);
  grid-template-areas: "lab field" "tag field";
  grid-template-rows: min-content minmax(0, 1fr);
  gap: 0 var(--space-md);
  align-items: start;
}
.close-field__label {
  grid-area: lab;
  padding: 0.86rem 0 0;
  font-size: var(--text-plate);
  line-height: 2.2;
  letter-spacing: 0.14em;
  color: var(--dim);
  transition: color var(--dur-micro) var(--ease-out);
}
.close-field__in {
  grid-area: field;
  align-self: start;
  width: 100%;
  padding: 0.82rem 0.95rem;
  font-family: inherit;
  font-weight: 300;
  font-size: var(--text-sm);
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--ink);
  background: rgb(244 242 234 / 0.038);
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  appearance: none;
  caret-color: var(--amber);
  max-width: 32rem;
  transition: background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}
textarea.close-field__in { resize: vertical; min-height: 6.5rem; max-width: 40rem; }
.close-field__in:-webkit-autofill,
.close-field__in:-webkit-autofill:hover,
.close-field__in:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 100px var(--void) inset;
  caret-color: var(--amber);
  transition: background-color 6000s;
}
.close-field__row:focus-within .close-field__in {
  background: rgb(244 242 234 / 0.068);
  border-bottom-color: var(--amber);
}
.close-field__row:focus-within .close-field__label { color: var(--quiet); }

.close-field__tag {
  grid-area: tag;
  font-size: 0.625rem;
  line-height: 1.5;
  letter-spacing: 0.2em;
  white-space: nowrap;
  color: var(--amber);
}
.close-field__tag:not(.close-field__tag--req) { display: none; }

.close-field__err {
  display: none;
  margin-left: calc(var(--labw) + var(--space-md));
  padding: 0.45rem 0 0.15rem;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--amber);
}
.close-field.is-bad .close-field__err { display: block; }
.close-field.is-bad .close-field__in {
  background: rgb(255 181 74 / 0.055);
  border-bottom-color: var(--amber);
}
.close-field.is-bad .close-field__label { color: var(--amber); }

.close-trap {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.close-privacy {
  margin-left: calc(var(--labw) + var(--space-md));
  padding-top: var(--space-lg);
  font-size: var(--text-sm);
  line-height: 1.9;
  color: var(--quiet);
}
.close-privacy a {
  display: inline-block;
  margin-top: 0.5em;
  color: var(--quiet);
  border-bottom: 1px solid rgb(151 145 127 / 0.4);
  transition: color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}
.close-privacy a:hover { color: var(--ink); border-bottom-color: var(--ink); }


.close-send {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-md);
  margin: var(--space-lg) 0 0 calc(var(--labw) + var(--space-md));
  padding: 1.05rem 2.9rem;
  background: none;
  border: 1px solid rgb(255 181 74 / 0.55);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  cursor: pointer;
  overflow: clip;
  transition: color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}
.close-send::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform calc(var(--dur-micro) * 3) var(--ease-out);
}
.close-send:hover::before,
.close-send:focus-visible::before { transform: none; }
.close-send:hover,
.close-send:focus-visible { border-color: var(--amber); color: var(--void); }
.close-send:hover .close-send__jp,
.close-send:focus-visible .close-send__jp { color: rgb(10 10 10 / 0.7); }
.close-send:active { transform: scale(0.994); }
.close-send__en,
.close-send__jp { position: relative; }
.close-send__en {
  font-size: var(--text-plate);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
}
.close-send__jp { font-size: var(--text-sm); letter-spacing: 0.14em; color: var(--quiet); }
.close-send[disabled] {
  cursor: default;
  color: var(--dim);
  border-color: rgb(255 181 74 / 0.22);
}
.close-send[disabled]::before { transform: scaleX(0); }
.close-send[disabled] .close-send__jp { color: var(--dim); }

.close-status {
  position: relative;
  padding: var(--space-md) 0 0 1.6rem;
  font-size: var(--text-sm);
  line-height: 1.9;
  color: var(--quiet);
}
.close-status::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--space-md) + 0.92em);
  width: 1rem;
  height: 1px;
  background: currentColor;
}
.close-status:empty { padding: 0; }
.close-status:empty::before { content: none; }
.close-status[data-state="busy"] { color: var(--dim); }
.close-status[data-state="ok"]   { color: var(--amber); }
.close-status[data-state="ng"]   { color: var(--amber); }


.colophon__imprint {
  width: 100%;
  padding-top: calc(1.6 * var(--text-plate) + var(--space-md));
}
.colophon__dl {
  display: grid;
  gap: var(--space-lg);
  width: 100%;
  margin: 0;
}
.colophon__row {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  gap: 0 var(--space-md);
}
.colophon__row dt {
  font-size: var(--text-plate);
  line-height: 1.9;
  letter-spacing: 0.14em;
  color: var(--dim);
}
.colophon__row dd {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.9;
  color: var(--quiet);
}
.colophon__row--name dd { font-size: var(--text-md); color: var(--ink); }
.colophon__en {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-md);
  letter-spacing: 0.05em;
  color: var(--dim);
}
.mail {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-mail);
  letter-spacing: 0.05em;
  color: var(--amber);
  border-bottom: 1px solid rgb(255 181 74 / 0.45);
  padding-bottom: 0.1em;
  transition: border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.mail:hover { border-bottom-color: var(--amber); }
.mail:active { transform: scale(0.985); }

.close-result {
  min-height: 100svh;
  align-content: center;
}
.close-result .close-words { max-width: 46rem; }
.close-result__errs {
  margin: 0;
  padding-left: 1.1rem;
  font-size: var(--text-sm);
  line-height: 1.9;
  color: var(--amber);
}
.close-result__back { padding-top: var(--space-md); }

.close-doc {
  display: grid;
  gap: var(--space-xl);
  max-width: var(--measure);
  border-top: 1px solid rgb(151 145 127 / 0.2);
  padding-top: var(--space-xl);
}



.close-doc h2 {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: var(--ink);
}
.close-doc p { color: var(--quiet); font-size: var(--text-sm); line-height: 2; }
.close-doc p + p { margin-top: var(--space-md); }

.close-doc__list,
.close-doc__subhead,
.close-doc__sign,
.close-doc__links {
  margin-top: var(--space-md);
}
.close-doc h2 + .close-doc__list,
.close-doc h2 + .close-doc__subhead {
  margin-top: 0;
}
.close-doc__subhead + .close-doc__list,
.close-doc__subhead + p {
  margin-top: var(--space-xs);
}
.close-doc__list,
.close-doc__links {
  padding-left: 1.1rem;
  font-size: var(--text-sm);
  line-height: 2;
}
.close-doc__list { color: var(--quiet); }
.close-doc__list li + li,
.close-doc__links li + li {
  margin-top: 0.4em;
}
.close-doc__subhead {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--quiet);
}
.close-doc__sign {
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: 1px solid rgb(151 145 127 / 0.2);
  color: var(--dim);
  font-size: var(--text-sm);
  line-height: 1.8;
}
.close-doc a {
  color: var(--quiet);
  border-bottom: 1px solid rgb(201 195 180 / 0.4);
  transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.close-doc a:hover { color: var(--amber); border-bottom-color: var(--amber); }




.colophon {
  min-height: 100svh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
  gap: clamp(2rem, 6svh, 3.5rem);
  padding: clamp(3rem, 9svh, 6rem) var(--gutter) clamp(1.8rem, 5svh, 3rem);
}
.colophon__card {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(1.1rem, 3.2svh, 2rem);
  text-align: center;
}
.colophon__logo { display: block; width: clamp(160px, 14vw, 210px); color: var(--ink); }
.colophon__logo svg { display: block; width: 100%; height: auto; fill: currentColor; }









.colophon__rule {
  display: block;
  width: clamp(4rem, 8vw, 8.25rem);
  height: 2px;
  background: linear-gradient(to right, var(--amber), rgb(255 181 74 / 0));
}
.colophon__name {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.5rem);
  font-weight: 300;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--quiet);
}
.colophon__name span {
  display: block;
  margin-top: 0.5em;
  font-family: var(--font-jp-display);
  font-size: var(--text-plate);
  letter-spacing: 0.2em;
  color: var(--dim);
}
.colophon__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem clamp(1.5rem, 4vw, 3rem);
}
.colophon__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem clamp(1.2rem, 3vw, 2.4rem);
}
.colophon__nav a {
  font-size: var(--text-plate);
  letter-spacing: var(--track-plate);
  color: var(--quiet);
  transition: color var(--dur-micro) var(--ease-out);
}
.colophon__nav a:hover { color: var(--ink); }
.colophon__legal {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem clamp(1.2rem, 3vw, 2.2rem);
}
.colophon__line {
  font-size: var(--text-plate);
  letter-spacing: var(--track-plate);
  color: var(--dim);
}
.colophon__privacy {
  font-size: var(--text-plate);
  letter-spacing: var(--track-plate);
  color: var(--quiet);
  border-bottom: 1px solid rgb(151 145 127 / 0.35);
  padding-bottom: 0.15em;
  transition: color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}
.colophon__privacy:hover { color: var(--ink); border-bottom-color: var(--ink); }

@media (min-width: 64rem), (min-width: 48rem) and (pointer: fine) {


  .work__panel {
    display: grid;
    padding-inline: var(--gutter);
    overflow: clip;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }
  .work__panel .bleed-l { margin-left: calc(-1 * var(--gutter)); }
  .work__panel .bleed-r { margin-right: calc(-1 * var(--gutter)); }


  .work-head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    row-gap: calc(var(--space-md) * 2);
    align-items: baseline;
  }
  .work-head .plate { grid-column: 1 / -1; grid-row: 1; }
  .work-head__h     { grid-column: 1 / 6;  grid-row: 2; margin-top: 0; }
  .work-head__lede  { grid-column: 1 / 6;  grid-row: 3; margin-top: 0; }



  .wp1 {
    grid-template-rows: minmax(0, 1fr) auto auto;
    min-height: 30rem;

    --no: clamp(4.5rem, min(15vw, 17svh), 13rem);
  }
  .wp1 .work__no {
    grid-column: 2 / 7;
    grid-row: 2;
    justify-self: end;
    align-self: end;
  }
  .wp1__plate { grid-column: 7 / -1; grid-row: 1 / 4; align-self: stretch; min-height: 22rem; }


  .wp1__plate img {
    object-position: 52% 48%;
    transform-origin: 84% 50%;
    transform: scale(1.26);
  }


  .wp1 .work__text {
    grid-column: 2 / 7;
    grid-row: 3;
    align-self: start;
    padding-bottom: clamp(3rem, 9svh, 7rem);
  }

  .wp2 {
    position: relative;
    grid-template-rows: minmax(0, 1fr);
    min-height: 30rem;
    --no: clamp(7rem, min(26vw, 44svh), 21rem);
  }






  .wp2__no {
    grid-column: 7 / -1;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    line-height: 0.8;
    color: transparent;
    opacity: 1;
    -webkit-text-stroke: 2.4px rgb(255 181 74 / 0.8);
    pointer-events: none;
  }
  .wp2__wire {
    position: absolute;
    inset: 0 0 0 52%;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    margin: 0;
  }

  .wp2 .work__text {
    position: relative;
    grid-column: 2 / 7;
    grid-row: 1;
    align-self: center;
    margin-bottom: clamp(3rem, 10svh, 6rem);
  }

  .wp3 {
    position: relative;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 30rem;

    --no: clamp(5.5rem, min(19vw, 18svh), 16rem);
  }






  .wp3__plate { grid-column: 1 / 8; grid-row: 1 / 3; align-self: stretch; }


  .wp3__plate img {
    object-position: 30% 54%;
    transform-origin: 14% 82%;
    transform: scale(1.18);
  }
  .wp3__plate::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(10 10 10 / 0.94) 0%, rgb(10 10 10 / 0.78) 9%, rgb(10 10 10 / 0.5) 14%, rgb(10 10 10 / 0) 32%);
  }



  .wp3 .work__text {
    grid-column: 6 / -1;
    grid-row: 1;
    align-self: start;
    position: relative;
    z-index: var(--z-plate);
    margin-right: calc(-1 * var(--gutter));
    padding: var(--space-md) var(--gutter) clamp(1rem, 3.5svh, 2rem);
    background: var(--void);
  }


  .wp3__no {
    grid-column: 9 / -1;
    grid-row: 2;
    justify-self: end;
    align-self: end;
    margin-bottom: clamp(0.75rem, 3.5svh, 2.5rem);
    line-height: 0.8;
    color: transparent;
    opacity: 1;

    -webkit-text-stroke: 2.4px rgb(244 242 234 / 0.62);
  }

  .wp4 {
    position: relative;
    grid-template-rows: minmax(0, 1fr);
    min-height: 30rem;
    --no: clamp(6.5rem, min(22vw, 40svh), 19rem);
  }
  .wp4__plate { grid-column: 1 / -1; grid-row: 1; width: 100vw; }





  .wp4__plate img { object-position: 50% 50%; transform: scale(1.11); }


  .wp4__plate::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to right, rgb(10 10 10 / 0.88) 0%, rgb(10 10 10 / 0.6) 30%, rgb(10 10 10 / 0) 58%),
      linear-gradient(to top, rgb(10 10 10 / 0.62) 0%, rgb(10 10 10 / 0.2) 22%, rgb(10 10 10 / 0) 42%),
      radial-gradient(50% 44% at 85% 63%, rgb(10 10 10 / 0.42) 0%, rgb(10 10 10 / 0.15) 50%, rgb(10 10 10 / 0) 80%);
  }

  .wp4__no {
    grid-column: 8 / -1;
    grid-row: 1;
    justify-self: end;
    align-self: end;
    margin-bottom: clamp(5.5rem, 15svh, 9rem);
    opacity: 0.82;
  }

  .wp4__text {
    grid-column: 1 / 7;
    grid-row: 1;
    justify-self: start;
    align-self: end;
    margin-bottom: clamp(5.5rem, 15svh, 9rem);
  }
}

@media (max-width: 61.99rem) {
  .colophon__cols { grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 8svh, 4rem); }
}

@media (max-width: 47.99rem), (pointer: coarse) and (max-width: 63.99rem) {


  .hero__scroll { display: none; }
  .colophon__logo { width: 120px; }
  .colophon__row { grid-template-columns: 6.2em minmax(0, 1fr); gap: 0 var(--space-sm); }

  .close-field__row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    padding-top: 0.35rem;
  }
  .close-field__label { grid-area: 1 / 1; padding: 0; }
  .close-field__tag   { grid-area: 1 / 2; padding: 0; }
  .close-field__in    { grid-area: 2 / 1 / 3 / 3; padding: 0.82rem 0.95rem; }
  .close-field__err   { margin-left: 0; }
  .close-privacy { margin-left: 0; }
  .close-send { margin-left: 0; width: 100%; justify-content: center; }
}

@media (max-width: 47.99rem), (pointer: coarse) and (max-width: 63.99rem) {

  .work__panel { display: flex; flex-direction: column; }
  .work__text { order: 2; }
  .wp2__wire { order: 3; margin-top: var(--space-lg); }
  .wp1__plate, .wp4__plate, .wp3__plate { order: 3; margin-top: var(--space-lg); margin-bottom: var(--space-lg); }
  .wp1__plate { aspect-ratio: 5 / 4; }
  .wp1__plate img { object-position: 52% 46%; }
  .wp3__plate { aspect-ratio: 4 / 3; }
  .wp3__plate img { object-position: 46% 52%; }


  .wp4__plate { aspect-ratio: 4 / 5; }
  .wp4__plate img {
    object-position: 66% 50%;
    transform-origin: 66% 100%;
    transform: scale(1.35);
  }
  .wp4__plate::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(10 10 10 / 0.72) 0%, rgb(10 10 10 / 0.18) 22%, rgb(10 10 10 / 0) 44%);
  }

  .work__no { order: 1; font-size: clamp(3rem, 8vw, 3.5rem); line-height: 1; margin-bottom: var(--space-2xs); }
  .wp2__no {
    color: transparent;
    opacity: 1;
    -webkit-text-stroke: 1.2px rgb(255 181 74 / 0.49);
  }
  .wp3__no {
    color: transparent;
    opacity: 1;
    -webkit-text-stroke: 1.2px rgb(244 242 234 / 0.38);
  }
  .wp2__wire--x { display: none; }
  .work__note { max-width: none; font-size: 1rem; line-height: 1.9; }
}

@media (max-width: 47.99rem), (pointer: coarse) and (max-width: 63.99rem) {
  .connect { --box: min(calc(100svh - 8rem), 150vw); }
  .cam { top: 40%; }
  .ln-glow path { stroke-width: 1.4; }
  .ln-glow path.ln--m1 { stroke-width: 1.9; }
  .ln-glow path.ln--m3 { stroke-width: 1; }
  .ln-core path { stroke-width: 0.28; }
  .ln-core path.ln--m1 { stroke-width: 0.4; }
  .ln-core path.ln--m3 { stroke-width: 0.18; }
  .connect { --plate-bottom: clamp(1.2rem, 3.4svh, 2rem); --brief-in: 0rem; --brief-up: 0rem; }








  .field-scrim {
    background: linear-gradient(to bottom, var(--void) 0, transparent 7rem);
  }
  .field-scrim::before { display: none; }
  .constel__legend {
    top: auto;
    left: auto;
    right: var(--gutter);
    bottom: var(--plate-bottom);
    translate: none;
  }
}






.js .stage { height: calc(100svh + var(--pin)); }
.js .stage--hero    { --pin: var(--pin-hero); }
.js .stage--constel { --pin: var(--pin-constel); }
.js .stage--work    { --pin: var(--pin-work); }
.js .stage--light   { --pin: var(--pin-light); }
.js .pin,
.js .stage--hero > .hero {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
}
.js .stage--constel { margin-top: -100svh; }

.js [data-reveal] .rv-up {
  opacity: 0;
  transform: translate3d(0, calc(0.9rem * var(--amp)), 0);
  transition: opacity var(--dur-rise) var(--ease-out) var(--rv, 0ms),
              transform var(--dur-rise) var(--ease-out) var(--rv, 0ms);
}
.js [data-reveal].is-in .rv-up { opacity: 1; transform: none; }
.js [data-reveal].is-in .mail { transform: none; }




.js .hero__img {
  transform: scale(calc(1 + var(--dk, 0) * var(--dk, 0) * 0.048));


  filter: saturate(calc(1 - var(--dk, 0) * 0.70))
          contrast(calc(1 - var(--dk, 0) * 0.27))
          sepia(calc(var(--dk, 0) * 0.40));
}
.js .hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: calc(var(--dk, 0) * 0.68);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='g' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.56 0 0 0 0 0.53 0 0 0 0 0.47 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='1.5' intercept='-0.45'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
}
.js .hero__veil {
  transform: translate3d(0, calc((1 / var(--dk-travel) - var(--dk, 0)) * 100%), 0);
}
.js .hero__after { opacity: clamp(0, calc((var(--dk, 0) - 0.8) * 5), 1); }
.js .hero__copy { opacity: clamp(0, calc((1 - var(--qr, var(--q, 0))) * 8.4), 1); }



.js [data-flip] {
  color: color-mix(in srgb, var(--ink) calc(var(--tc, 0) * 100%), var(--paper-ink));
}
.js .hero__scale {
  color: color-mix(in srgb, var(--dim) calc(var(--tc, 0) * 100%), var(--paper-dim));
}


@keyframes hero-catch-in {
  from {
    opacity: 0;
    filter: blur(14px);
    transform: translate3d(0, 2.6rem, 0) scale(1.11);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes hero-rise-in {
  from { opacity: 0; transform: translate3d(0, 1.5rem, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-rule-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.js .hero__catch {
  transform-origin: 0 100%;
  animation: hero-catch-in 1.9s var(--ease-out) 0.25s backwards;
}
.js .hero__kicker {
  animation: hero-rise-in 1.2s var(--ease-out) 0.15s backwards;
}
.js .hero__scale i {
  animation: hero-rule-in var(--sp) var(--ease-out) var(--dl) backwards;
}



@keyframes hero-scroll-drop {
  0%     { transform: translate3d(0, -110%, 0); opacity: 0; }
  15.6%  { opacity: 1; }
  53.73% { opacity: 1; }
  86.67% { transform: translate3d(0, 268%, 0); opacity: 0; }
  100%   { transform: translate3d(0, 268%, 0); opacity: 0; }
}
.js .hero__scroll-l::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 38%;
  background: currentColor;
  animation: hero-scroll-drop 3s cubic-bezier(0.4, 0, 0.5, 1) 1.2s infinite;
}
.js .hero__scroll-l.is-parked::after {
  animation-play-state: paused;
}
.js .hero__scroll {
  --scroll-out: clamp(0, calc((var(--q, 0) - 0.15) * 10), 1);
  opacity: calc(1 - var(--scroll-out));
  transform: translate3d(0, calc(var(--scroll-out) * 4px), 0);
}



@keyframes masthead-nav-in {
  from { opacity: 0;    transform: translate3d(0, 4px, 0); }
  to   { opacity: 1;    transform: none; }
}
.js .masthead__nav,
.js .masthead__menu {
  opacity: 1;
  animation: masthead-nav-in 0.7s var(--ease-out) 1.1s backwards;
}

.js .masthead {
  --nav-ink: color-mix(in srgb, var(--quiet) calc(var(--tc, 0) * 100%), var(--paper-ink));
  --nav-act-ink: color-mix(in srgb, var(--amber) calc(var(--tc, 0) * 100%), var(--paper-ink));
}
.js .masthead__menu { color: var(--nav-ink); }
.js .masthead__nav a[href="#about"]    { --act: var(--nav-about, 0); }
.js .masthead__nav a[href="#work"]     { --act: var(--nav-work, 0); }
.js .masthead__nav a[href="#contact"]  { --act: var(--nav-contact, 0); }
.js .masthead__nav a {
  color: color-mix(in srgb, var(--nav-act-ink) calc(var(--act, 0) * 100%), var(--nav-ink));
  opacity: 1;
}
.js .masthead__nav a:hover {
  color: color-mix(in srgb, var(--ink) calc(var(--tc, 0) * 100%), var(--paper-ink));
}


@media (max-width: 30rem) {
  .js .masthead__menu { display: inline-flex; }
  .js .masthead__nav {
    animation: none;
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-lg);
    padding: 0;
    margin: 0;
    background: var(--void);
    font-size: var(--text-md);
    opacity: 0;
    pointer-events: none;
    transform: none;
    transition: opacity var(--dur-rise) var(--ease-out);
  }
  .js .masthead__nav.is-open { opacity: 1; pointer-events: auto; }
  .js .masthead:has(.masthead__nav.is-open) { z-index: var(--z-shutter); }
  .js .masthead__nav a { --nav-ink: var(--quiet); --nav-act-ink: var(--amber); }
  .js .masthead__nav a:hover,
  .js .masthead__nav a:focus-visible { color: var(--ink); }
}
html.nav-open body { overflow: hidden; }

.js .masthead { opacity: calc((1 - var(--lit, 0)) * (1 - var(--end, 0))); }



.js .masthead__mark svg { transition: opacity 640ms var(--ease-out); }
.js .masthead__mark.is-off { pointer-events: none; }
.js .masthead__mark.is-off svg { opacity: 0; transition-duration: 240ms; }
.js .masthead__nav a {
  transition: color var(--dur-micro) var(--ease-out),
              opacity 640ms var(--ease-out);
}
.js .masthead__nav.is-off { pointer-events: none; }
.js .masthead__nav.is-off a {
  opacity: 0;
  transition-duration: var(--dur-micro), 240ms;
}
.js .masthead__nav.is-open { pointer-events: auto; }
.js .masthead__nav.is-open a { opacity: 1; }

.js .connect { --exit: clamp(0, calc((var(--q, 0) - 0.94) / 0.06), 1); }
.js .constel { opacity: calc(clamp(0, calc(var(--q, 1) * 80), 1) * (1 - var(--exit))); }
.js .constel__legend { opacity: calc(clamp(0, calc(var(--q, 1) * 80), 1) * (1 - var(--exit))); }





















.js .hero {
  --seal: clamp(0, calc((var(--dk, 0) - 0.995) * 200), 1);
  background-color: color-mix(in srgb, var(--void) calc(var(--seal) * 100%), #f4f1ee);
  background-image: linear-gradient(rgb(10 10 10 / var(--seal)), rgb(10 10 10 / var(--seal)));
}
.js .hero__media {
  -webkit-mask-image: linear-gradient(to top, transparent 0 calc(var(--seal) * 3px), #000 calc(var(--seal) * 16px));
          mask-image: linear-gradient(to top, transparent 0 calc(var(--seal) * 3px), #000 calc(var(--seal) * 16px));
}
.js .field-scrim { opacity: calc(clamp(0, calc(var(--q, 1) * 20), 1) * (1 - var(--exit))); }
.js .cam {
  --a1: clamp(0, calc(var(--q, 0) / 0.42), 1);
  --a2: clamp(0, calc((var(--q, 0) - 0.42) / 0.58), 1);
  --cam: calc(1 - var(--a1) * 0.10 - var(--a2) * 0.62);
  transform: translate3d(0, calc(var(--a2) * 23.6%), 0) scale(var(--cam));
  transform-origin: 49% 10%;
  opacity: calc(1 - var(--exit));
  will-change: transform;
}
.js .constel {
  --t: clamp(0, calc(var(--q, 1) / 0.5), 1);
  transform: perspective(1400px)
             rotateY(calc((-9deg + var(--t) * 13.5deg) * var(--amp)))
             rotateX(calc((5.5deg - var(--t) * 7.5deg) * var(--amp)))
             scale(calc(0.88 + var(--t) * 0.17));
  transform-origin: 42% 50%;
}
.js .constel__lines path {
  --d: clamp(0, calc((var(--q, 1) - var(--i) * 0.03625 - var(--mag-lead-ln, 0)) * var(--mag-speed-ln, 10)), 1);
  stroke-dashoffset: calc((1 - var(--d)) * 0.64);
}
.js .star {
  --d: clamp(0, calc((var(--q, 1) - var(--i) * 0.03625 - var(--mag-lead, 0)) * var(--mag-speed, 8)), 1);
  opacity: calc(var(--d) * var(--star-op, 1));
  scale: calc(0.4 + var(--d) * 0.6);
}
.js .zone, .js .node {
  --d: clamp(0, calc((var(--q, 1) - 0.015 - var(--i) * 0.03625) * 6.8), 1);
  opacity: var(--d);
}









.js .field .nb {
  --nr: clamp(0, calc((var(--q, 1) - 0.13 - var(--i) * 0.048) / 0.105), 1);
  --nl: clamp(0, calc((var(--q, 1) - 0.13 - var(--i) * 0.048) / 0.0724), 1);
}
.js .field div.nb { opacity: var(--nr); }
.js .field .nb path { stroke-dashoffset: calc((1 - var(--nl, 1)) * 0.64); }
.js .field .nb { stroke-opacity: clamp(0, calc(var(--nl, 1) * 80), 1); }


.js .field .nb path.ln-dash {
  stroke-dashoffset: 0;
  stroke-opacity: clamp(0, calc((var(--nr, 1) - 0.55) / 0.45), 1);
}
.js .field .nb path.ln-halo {
  stroke-opacity: clamp(0, calc((var(--nl, 1) - 0.35) / 0.65), 1);
}
.js .node { translate: -0.105em calc(-100% - 0.29em + (1 - var(--d, 1)) * 0.37em); }
.js .node::after { height: calc(0.29em + (1 - var(--d, 1)) * 0.37em); }



.js .field-label {
  --in: clamp(0, calc((var(--q, 1) - 0.26) / 0.10), 1);
  --out: clamp(0, calc((var(--q, 0) - 0.84) / 0.10), 1);
  opacity: calc(var(--in) * (1 - var(--out)));
  translate: 0 calc((1 - var(--in)) * 4px);
}










.js .stage--about { --pin: var(--pin-about); }
.js .about-pin {
  --e: clamp(0, calc(1 - var(--p, -1)), 1);
  --T: calc(var(--e) * 0.30 + var(--q, 1) * 0.70);

  --t1: clamp(0, calc((var(--T) - 0.105) / 0.070), 1);
  --t2: clamp(0, calc((var(--T) - 0.150) / 0.090), 1);
  --t3: clamp(0, calc((var(--T) - 0.205) / 0.100), 1);
  --t4: clamp(0, calc((var(--T) - 0.272) / 0.128), 1);
  --t5: clamp(0, calc((var(--T) - 0.335) / 0.135), 1);
  --s1: calc(var(--t1) * var(--t1) * (3 - 2 * var(--t1)));
  --s2: calc(var(--t2) * var(--t2) * (3 - 2 * var(--t2)));
  --s3: calc(var(--t3) * var(--t3) * (3 - 2 * var(--t3)));
  --s4: calc(var(--t4) * var(--t4) * (3 - 2 * var(--t4)));
  --s5: calc(var(--t5) * var(--t5) * (3 - 2 * var(--t5)));

  --tp: clamp(0, calc((var(--T) - 0.500) / 0.220), 1);
  --pn: calc(var(--tp) * var(--tp) * var(--tp) * (var(--tp) * (var(--tp) * 6 - 15) + 10));

  --lab:  clamp(0, calc((var(--T) - 0.660) / 0.070), 1);
  --h1:   clamp(0, calc((var(--T) - 0.700) / 0.090), 1);
  --h2:   clamp(0, calc((var(--T) - 0.755) / 0.100), 1);
  --body: clamp(0, calc((var(--T) - 0.820) / 0.135), 1);
}
.js .about__silver { clip-path: inset(0 0 0 calc(var(--pn) * 48%)); }
.js .about__frame { opacity: var(--s5); }
.js .about__wave--1 { opacity: var(--s1); }
.js .about__wave--2 { opacity: var(--s2); }
.js .about__wave--3 { opacity: var(--s3); }
.js .about__wave--4 { opacity: var(--s4); }
.js .about__label,
.js .about__line > span {
  -webkit-mask-image: linear-gradient(to right,
    #000 calc(var(--m) * 132% - 32%), transparent calc(var(--m) * 132% - 4%));
          mask-image: linear-gradient(to right,
    #000 calc(var(--m) * 132% - 32%), transparent calc(var(--m) * 132% - 4%));
  -webkit-mask-clip: no-clip;
          mask-clip: no-clip;
}
.js .about__label { --m: var(--lab); }
.js .about__line > span { --m: var(--h1); }
.js .about__line:last-child > span { --m: var(--h2); }
.js .prose p {
  --pd: clamp(0, calc((var(--body) - var(--i, 0) * 0.12) / 0.4), 1);
  opacity: var(--pd);
  translate: 0 calc((1 - var(--pd)) * 0.4rem);
}
.js .about__rule { transform: scaleX(var(--body)); }

@media (max-width: 47.99rem), (pointer: coarse) and (max-width: 63.99rem) {


  .js .about-pin {
    --t1: clamp(0, calc((var(--T) - 0.120) / 0.100), 1);
    --t2: clamp(0, calc((var(--T) - 0.180) / 0.130), 1);
    --t5: clamp(0, calc((var(--T) - 0.290) / 0.150), 1);
    --tp: clamp(0, calc((var(--T) - 0.470) / 0.200), 1);
    --lab:  clamp(0, calc((var(--T) - 0.620) / 0.080), 1);
    --h1:   clamp(0, calc((var(--T) - 0.670) / 0.100), 1);
    --h2:   clamp(0, calc((var(--T) - 0.730) / 0.110), 1);
    --body: clamp(0, calc((var(--T) - 0.800) / 0.150), 1);
  }
  .js .about__silver { clip-path: none; }
  .js .about__silver::after { opacity: var(--pn); }
  .about__wave--3,
  .about__wave--4 { display: none; }
  .about__wave--1 {
    -webkit-mask-image:
      radial-gradient(ellipse 26% 15% at 57% 52%, #000 0%, rgb(0 0 0 / 0.86) 30%, rgb(0 0 0 / 0.40) 62%, transparent 88%),
      radial-gradient(ellipse 18% 11% at 67% 43%, #000 0%, rgb(0 0 0 / 0.66) 34%, transparent 84%);
            mask-image:
      radial-gradient(ellipse 26% 15% at 57% 52%, #000 0%, rgb(0 0 0 / 0.86) 30%, rgb(0 0 0 / 0.40) 62%, transparent 88%),
      radial-gradient(ellipse 18% 11% at 67% 43%, #000 0%, rgb(0 0 0 / 0.66) 34%, transparent 84%);
  }
  .about__wave--2 {
    -webkit-mask-image:
      radial-gradient(ellipse 46% 20% at 20% 46%, #000 0%, rgb(0 0 0 / 0.82) 26%, rgb(0 0 0 / 0.36) 60%, transparent 88%),
      radial-gradient(ellipse 24% 14% at 8% 62%, #000 0%, rgb(0 0 0 / 0.60) 32%, transparent 85%);
            mask-image:
      radial-gradient(ellipse 46% 20% at 20% 46%, #000 0%, rgb(0 0 0 / 0.82) 26%, rgb(0 0 0 / 0.36) 60%, transparent 88%),
      radial-gradient(ellipse 24% 14% at 8% 62%, #000 0%, rgb(0 0 0 / 0.60) 32%, transparent 85%);
  }
}










.js .stage--work {
  --t1: clamp(0, calc((var(--q, 0) - 0.145) / 0.14), 1);
  --t2: clamp(0, calc((var(--q, 0) - 0.43) / 0.14), 1);
  --t3: clamp(0, calc((var(--q, 0) - 0.715) / 0.14), 1);
  --s1: calc(var(--t1) * var(--t1) * (3 - 2 * var(--t1)));
  --s2: calc(var(--t2) * var(--t2) * (3 - 2 * var(--t2)));
  --s3: calc(var(--t3) * var(--t3) * (3 - 2 * var(--t3)));
  --qs: calc((var(--s1) + var(--s2) + var(--s3)) / 3);

  --ta1: clamp(0, calc((var(--q, 0) - 0.131) / 0.132), 1);
  --ta2: clamp(0, calc((var(--q, 0) - 0.416) / 0.132), 1);
  --ta3: clamp(0, calc((var(--q, 0) - 0.701) / 0.132), 1);
  --sa1: calc(var(--ta1) * var(--ta1) * (3 - 2 * var(--ta1)));
  --sa2: calc(var(--ta2) * var(--ta2) * (3 - 2 * var(--ta2)));
  --sa3: calc(var(--ta3) * var(--ta3) * (3 - 2 * var(--ta3)));
  --qa: calc((var(--sa1) + var(--sa2) + var(--sa3)) / 3);

  --tc1: clamp(0, calc((var(--q, 0) - 0.159) / 0.147), 1);
  --tc2: clamp(0, calc((var(--q, 0) - 0.444) / 0.147), 1);
  --tc3: clamp(0, calc((var(--q, 0) - 0.729) / 0.147), 1);
  --sc1: calc(var(--tc1) * var(--tc1) * (3 - 2 * var(--tc1)));
  --sc2: calc(var(--tc2) * var(--tc2) * (3 - 2 * var(--tc2)));
  --sc3: calc(var(--tc3) * var(--tc3) * (3 - 2 * var(--tc3)));
  --qc: calc((var(--sc1) + var(--sc2) + var(--sc3)) / 3);
}
.js .work {
  display: flex;
  width: 400%;
  height: 100%;
  min-height: 0;
  gap: 0;
  transform: translate3d(calc(var(--qs, 0) * -75%), 0, 0);
}
.js .work__panel {
  flex: 0 0 25%;
  width: 25%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  contain: paint;
  grid-template-rows: minmax(0, 1fr);
  --d: calc(var(--c) - var(--qs, 0));
  --ad: max(var(--d), -1 * var(--d));
  --near: clamp(0, calc(1 - var(--ad) * 3.6), 1);
  --da: calc(var(--c) - var(--qa, 0));
  --ada: max(var(--da), -1 * var(--da));
  --neara: clamp(0, calc(1 - var(--ada) * 3.6), 1);
  --dc: calc(var(--c) - var(--qc, 0));
  --adc: max(var(--dc), -1 * var(--dc));
  --nearc: clamp(0, calc(1 - var(--adc) * 3.6), 1);
}
.js .work__panel > * { min-height: 0; }
.js .wp1 { grid-template-rows: minmax(0, 1fr) auto auto; }
.js .wp3 { grid-template-rows: minmax(0, 1fr) auto; }
.js .work__text { transform: translate3d(calc(var(--dc) * -20% * var(--amp)), 0, 0); }
.js .work__rule { transform: scaleX(var(--nearc)); }





.js .wp1 .work__no  { transform: translate3d(calc(var(--d) * 85% * var(--amp)), 0, 0); }
.js .wp1__plate img {
  transform: translate3d(calc(var(--da) * -9% * var(--amp)), 0, 0)
             scale(calc(1.04 + var(--neara) * 0.22));
}

.js .wp2__no {
  transform-origin: 100% 50%;
  transform: scale(calc(1.62 - var(--near) * 0.62));
  opacity: calc(0.12 + 0.88 * var(--near) * var(--near));
}
.js .wp2 .work__text {
  clip-path: inset(0 -12% calc((1 - var(--nearc)) * 104%) -12%);
  transform: translate3d(0, calc((1 - var(--nearc)) * 2.2rem * var(--amp)), 0);
}




.js .wp2__wire {
  -webkit-mask-image: linear-gradient(to right,
    #000 calc(var(--neara, 1) * 128% - 28%), transparent calc(var(--neara, 1) * 128% - 2%));
          mask-image: linear-gradient(to right,
    #000 calc(var(--neara, 1) * 128% - 28%), transparent calc(var(--neara, 1) * 128% - 2%));
}
.js .wp2__wire-n circle { opacity: calc(var(--neara, 1) * var(--neara, 1)); }

.js .wp4__no   { transform: translate3d(0, calc(var(--d) * 16% * var(--amp)), 0); }
.js .wp4__plate img {
  transform: translate3d(calc(var(--da) * -5% * var(--amp)), 0, 0)
             rotate(calc(var(--da) * 15deg * var(--amp)))
             scale(calc(1.24 - var(--neara) * 0.13));
}
.js .wp3__plate { clip-path: inset(0 0 calc((1 - var(--neara)) * 100%) 0); }
.js .wp3__no { translate: 0 calc((1 - var(--near)) * 120% * var(--amp)); }
.js .wp3__plate img { transform: translate3d(0, calc(var(--da) * 5% * var(--amp)), 0) scale(1.18); }






@keyframes wp-breathe-photo { from { scale: 1; } to { scale: 1.015; } }
@keyframes wp-breathe-wire  { from { scale: 1; } to { scale: 1.012; } }
.js .wp1__plate img {
  scale: 1.0075;
}
.js .wp2__wire {
  transform-origin: 61.7% 44%;
  scale: 1.006;
}
.js .wp3__plate img {
  scale: 1.0075;
}
.js .wp4__plate img {
  scale: 1.0075;
}

.js .work__count-rule { transform: scaleX(clamp(0.02, var(--q, 1), 1)); }
.js .work__count-n > span {
  --cd: calc(var(--qs, 0) - var(--v, 0));
  opacity: clamp(0, calc(1 - max(var(--cd), -1 * var(--cd)) * 3), 1);
}
.js .work__count-n > span:nth-child(1) { --v: 0; }
.js .work__count-n > span:nth-child(2) { --v: 0.3333; }
.js .work__count-n > span:nth-child(3) { --v: 0.6667; }
.js .work__count-n > span:nth-child(4) { --v: 1; }




.js .work-pin {
  --we:  clamp(0, calc(1 - var(--p, -1)), 1);
  --e1:  clamp(0, calc((var(--we) - 0.42) / 0.18), 1);
  --e2:  clamp(0, calc((var(--we) - 0.52) / 0.20), 1);
  --e3:  clamp(0, calc((var(--we) - 0.56) / 0.26), 1);
  --e4:  clamp(0, calc((var(--we) - 0.66) / 0.24), 1);
  --e5:  clamp(0, calc((var(--we) - 0.80) / 0.15), 1);
  --eh1: calc(var(--e1) * var(--e1) * (3 - 2 * var(--e1)));
  --eh2: calc(var(--e2) * var(--e2) * (3 - 2 * var(--e2)));
  --ep:  calc(var(--e3) * var(--e3) * (3 - 2 * var(--e3)));
  --et:  calc(var(--e4) * var(--e4) * (3 - 2 * var(--e4)));
  --ec:  calc(var(--e5) * var(--e5) * (3 - 2 * var(--e5)));
}
.js .work-head .plate,
.js .work-head__h,
.js .work-head__lede {
  -webkit-mask-image: linear-gradient(to right,
    #000 calc(var(--m) * 132% - 32%), transparent calc(var(--m) * 132% - 4%));
          mask-image: linear-gradient(to right,
    #000 calc(var(--m) * 132% - 32%), transparent calc(var(--m) * 132% - 4%));
  -webkit-mask-clip: no-clip;
          mask-clip: no-clip;
}
.js .work-head .plate,
.js .work-head__h { --m: var(--eh1); }
.js .work-head__lede { --m: var(--eh2); }
.js .wp1__plate {
  -webkit-mask-image: linear-gradient(to right,
    #000 calc(var(--ep) * 122% - 22%), transparent calc(var(--ep) * 122% - 2%));
          mask-image: linear-gradient(to right,
    #000 calc(var(--ep) * 122% - 22%), transparent calc(var(--ep) * 122% - 2%));
}
.js .wp1 .work__no { opacity: var(--et); }
.js .wp1 .work__text {
  opacity: var(--et);
  translate: 0 calc((1 - var(--et)) * 0.4rem);
}
.js .work__count { opacity: var(--ec); }

@media (min-width: 64rem), (min-width: 48rem) and (pointer: fine) {
  .js .work-pin {
    grid-template-rows: auto minmax(0, 1fr);
    padding-bottom: 0;
  }
  .js .work__count {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(1.5rem, 4svh, 2.5rem);
    z-index: var(--z-raised);
  }
}

@media (max-width: 47.99rem), (pointer: coarse) and (max-width: 63.99rem) {
  .js .stage--work { height: auto; }
  .js .work-pin {
    position: static;
    height: auto;
    overflow: visible;
    --eh1: 1; --eh2: 1; --ep: 1; --et: 1; --ec: 1;
  }
  .js .work { display: grid; width: 100%; height: auto; transform: none; }
  .js .work__panel {
    flex: none;
    width: 100%;
    height: auto;
    grid-template-rows: none;
    padding-inline: var(--gutter);
    --d: 0;
    --near: 1;
    --da: 0;
    --neara: 1;
    --dc: 0;
    --nearc: 1;



    --wp-e: clamp(0, calc((1 - var(--p, -1)) / 0.55), 1);

    --wp-no-r: clamp(0, calc((var(--wp-e) - 0.00) / 0.42), 1);
    --wp-no: calc(var(--wp-no-r) * var(--wp-no-r) * (3 - 2 * var(--wp-no-r)));
    --wp-nm-r: clamp(0, calc((var(--wp-e) - 0.09) / 0.42), 1);
    --wp-nm: calc(var(--wp-nm-r) * var(--wp-nm-r) * (3 - 2 * var(--wp-nm-r)));
    --wp-ld-r: clamp(0, calc((var(--wp-e) - 0.18) / 0.42), 1);
    --wp-ld: calc(var(--wp-ld-r) * var(--wp-ld-r) * (3 - 2 * var(--wp-ld-r)));
    --wp-nt-r: clamp(0, calc((var(--wp-e) - 0.27) / 0.42), 1);
    --wp-nt: calc(var(--wp-nt-r) * var(--wp-nt-r) * (3 - 2 * var(--wp-nt-r)));
    --wp-ph-r: clamp(0, calc((var(--wp-e) - 0.36) / 0.42), 1);
    --wp-ph: calc(var(--wp-ph-r) * var(--wp-ph-r) * (3 - 2 * var(--wp-ph-r)));
  }
  .js .work__panel .work__no { opacity: var(--wp-no); translate: 0 calc((1 - var(--wp-no)) * 1rem); }
  .js .work__panel .work__en,
  .js .work__panel .work__jp,
  .js .work__panel .work__rule {
    opacity: var(--wp-nm);
    translate: 0 calc((1 - var(--wp-nm)) * 1rem);
  }
  .js .work__panel .work__lead { opacity: var(--wp-ld); translate: 0 calc((1 - var(--wp-ld)) * 1rem); }
  .js .work__panel .work__note { opacity: var(--wp-nt); translate: 0 calc((1 - var(--wp-nt)) * 1rem); }
  .js .wp1__plate, .js .wp2__wire, .js .wp3__plate, .js .wp4__plate { opacity: var(--wp-ph); }
  .js .wp1, .js .wp3 { grid-template-rows: none; }
  .js .work__text, .js .wp1 .work__no, .js .wp4__no,
  .js .wp1__plate img, .js .wp3__plate img {
    transform: none;
  }
  .js .wp4__plate img { transform: scale(1.35); }
  .js .wp2__no { transform: none; opacity: 1; }
  .js .wp2__wire { -webkit-mask-image: none; mask-image: none; }
  .js .wp2__wire-n circle { opacity: 1; }
  .js .work__count-n > span { opacity: 0; }
  .js .work__count-n > span:nth-child(1) { opacity: 1; }
  .js .wp2 .work__text, .js .wp3__plate { clip-path: none; transform: none; }
  .js .wp3__no { translate: none; }
}



.js .light {
  --lum: clamp(0, calc((var(--q, 1) - 0.04) / 0.42), 1);
  --ap:  clamp(0, calc((var(--q, 1) - 0.02) / 0.40), 1);
  --w:   clamp(0, calc((var(--q, 1) - 0.44) / 0.16), 1);
  --cl:  clamp(0, calc((var(--q, 1) - 0.80) / 0.06), 1);
  --sh:  calc(1 - var(--ap) + var(--cl) + var(--k, 0) * 0.13);
  background: var(--void);
}
.js .light__room {
  background: color-mix(in oklab, var(--void), var(--paper) calc(var(--lum) * 100%));
}
.js .light__plate { opacity: clamp(0, calc((var(--lum) - 0.55) * 2.6), 1); }
.js .light__h, .js .light__en {
  opacity: var(--w);
  transform: translate3d(0, calc((1 - var(--w)) * 1.5rem * var(--amp)), 0);
}

.js .blade {
  display: block;
  position: absolute;
  left: -1px;
  right: -1px;
  height: 70.6svh;
  z-index: var(--z-shutter);
  background: var(--void-3);
  will-change: transform;
}
.js .blade--t { top:    -20svh; transform: translate3d(0, calc((var(--sh) - 1) * 50.6svh), 0); }
.js .blade--b { bottom: -20svh; transform: translate3d(0, calc((1 - var(--sh)) * 50.6svh), 0); }
.js .blade--t::after, .js .blade--b::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgb(255 217 160 / calc(var(--lum) * 0.55));
}
.js .blade--t::after { bottom: 0; }
.js .blade--b::after { top: 0; }




.js .band--contact {
  --line: clamp(0, calc((1 - var(--p, 1)) / 0.2), 1);
  --lab:  clamp(0, calc((0.86 - var(--p, 1)) / 0.18), 1);
  --cols: clamp(0, calc((0.74 - var(--p, 1)) / 0.22), 1);
}
.js .close-line {
  transform: scaleX(calc(1 + (1 - var(--line)) * 12));
  transform-origin: center;
  opacity: var(--line);
  will-change: transform;
}
.js .close-words > .plate,
.js .close-lede {
  opacity: var(--lab);
  transform: translate3d(0, calc((1 - var(--lab)) * 0.55rem * var(--amp)), 0);
}
.js .colophon__cols {
  opacity: var(--cols);
  transform: translate3d(0, calc((1 - var(--cols)) * 0.7rem * var(--amp)), 0);
}







@keyframes mark-breathe { from { scale: 1; } to { scale: 1.05; } }


.js .colophon {
  --m: clamp(0, calc((0.80 - var(--p, 0)) / 0.46), 1);
}
.js .colophon__logo {
  transform: translate3d(0, calc((1 - var(--m)) * -3.6rem * var(--amp)), 0)
             scale(calc(1 + (1 - var(--m)) * 0.055));
  opacity: var(--m);
  will-change: transform;
}
.js .colophon__logo svg {
  scale: 1.025;
}
.js .colophon__rule {
  transform: scaleX(clamp(0, calc((0.40 - var(--p, 0)) / 0.16), 1));
  transform-origin: left center;
}
.js .colophon__name {
  opacity: clamp(0, calc((0.30 - var(--p, 0)) / 0.14), 1);
  translate: 0 calc(var(--p, 0) * 0.9rem);
}
.js .colophon__foot {
  opacity: clamp(0, calc((0.20 - var(--p, 0)) / 0.14), 1);
  translate: 0 calc(var(--p, 0) * 0.6rem);
}