.wordmark {
  display: block; font-family: var(--font-head); font-weight: 900; font-size: 15px; line-height: 1;
  letter-spacing: 0.12em; white-space: nowrap; color: var(--color-main);
}
.wordmark--rail { font-size: 30px; letter-spacing: 0.14em; }

.page--photo { --veil: linear-gradient(to bottom, var(--color-veil) 0%, var(--color-veil-0) 34%, var(--color-veil-0) 46%, var(--color-veil) 78%); }
.page--answer { --veil: linear-gradient(to bottom, var(--color-veil) 0%, var(--color-veil-0) 12%, var(--color-veil-0) 44%, var(--color-veil) 62%); }
.page--work { --veil: linear-gradient(to bottom, var(--color-veil-half) 0%, var(--color-veil-half) 36%, var(--color-band) 56%, var(--color-veil) 70%); }   
.page--photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--veil);
}

.page--photo {
  --lines-delay: 1200ms;
  --fv: calc(100% - 2 * var(--frame-y) + 2 * var(--frame-over));   
  --fw: calc(100% - 2 * var(--guide-x) + 2 * var(--frame-over));   
}
.page--photo::after {
  content: ""; position: absolute; inset: var(--header-h) 0 0 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(var(--color-frame), var(--color-frame)) left var(--guide-x) top calc(var(--frame-y) - var(--frame-over)) no-repeat,
    linear-gradient(var(--color-frame), var(--color-frame)) right var(--guide-x) top calc(var(--frame-y) - var(--frame-over)) no-repeat,
    linear-gradient(var(--color-frame), var(--color-frame)) left calc(var(--guide-x) - var(--frame-over)) top var(--frame-y) no-repeat,
    linear-gradient(var(--color-frame), var(--color-frame)) right calc(var(--guide-x) - var(--frame-over)) bottom var(--frame-y) no-repeat;
  background-size: 1px 0, 1px 0, 0 1px, 0 1px;
}
.page--photo.is-active::after { animation: frame-draw 1000ms var(--lines-delay) both; }
@keyframes frame-draw {
  0% { background-size: 1px 0, 1px 0, 0 1px, 0 1px; animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
  30% { background-size: 1px 0, 1px 0, var(--fw) 1px, 0 1px; animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
  70% { background-size: 1px var(--fv), 1px var(--fv), var(--fw) 1px, 0 1px; animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
  100% { background-size: 1px var(--fv), 1px var(--fv), var(--fw) 1px, var(--fw) 1px; }
}

.ph {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
  transform: scale(1.2); transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.page.is-active .ph { transform: none; }
.ph--top { inset: -80px 0 auto 0; height: 75%; object-position: center 92%; }   

.ph--work {
  inset: auto 0 auto 0; top: calc(var(--header-h) + 4.5em - 0.574 * min(100vw, var(--col)));    height: auto; aspect-ratio: 900 / 1260;
  -webkit-mask-image: linear-gradient(to bottom, var(--color-main) 62%, transparent); mask-image: linear-gradient(to bottom, var(--color-main) 62%, transparent);   
}

.page--dawn {
  --t0: var(--delay-type); --lines-delay: 1300ms;
  --veil:
    linear-gradient(to bottom, var(--color-veil) 0%, var(--color-veil-0) 30%),
    linear-gradient(to right, var(--color-band) 0%, var(--color-veil-0) 52%);   
}
.page--dawn .page__inner { max-height: 48em; top: max(0px, calc((100% - 48em) / 2)); }   
.page--dawn .bands { max-width: 62%; grid-template-columns: minmax(0, 1fr); font-size: max(var(--fs-min), 0.88em); gap: 0.2em; margin-bottom: 0.6em; }
.page--dawn .band__t { line-height: 1.58; letter-spacing: 0.05em; }

.page--dawn .ph { inset: 0 auto 0 12%; width: 130%; object-position: center 45%; transform-origin: right center; transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1) var(--delay-dawn); }
.shade {
  position: absolute; inset: 0; z-index: 0; background: var(--color-on-dark); pointer-events: none;
  transition: opacity 380ms cubic-bezier(0.5, 0, 0.75, 0) var(--delay-dawn);
}
.page.is-active .shade { opacity: 0; }
.page--dawn .num { transition-delay: calc(var(--delay-dawn) + var(--dur-dawn) - 400ms); }   

.tiles {
  position: absolute; inset: 0; z-index: 0; display: grid; pointer-events: none;
  grid-template: repeat(var(--rows), 1fr) / repeat(var(--cols), 1fr);
}
.tiles i { margin: -0.5px; background: var(--color-main); transform-origin: right center; }
.tiles i.to-left { transform-origin: left center; }
.page.is-active .tiles i { animation: tile-out 220ms cubic-bezier(0.65, 0, 0.35, 1) var(--d) both; }
@keyframes tile-out {
  from { transform: none; }
  to { transform: scaleX(0); }
}

.page--tiles { --t0: 650ms; --lines-delay: 1500ms; }   
.page--tiles .num, .page--tiles .sheet, .page--tiles .lead, .page--tiles .lead .wipe, .page--tiles .scope, .page--tiles .txt { transition-delay: 600ms; }

.page__inner--split { justify-content: space-between; gap: 1em; }
.page--answer .page__inner--split { justify-content: flex-end; }   
.page__inner--work { gap: 0.5em; line-height: 1.6; letter-spacing: 0.06em; }
.page__inner--work .scope, .page__inner--work .txt { font-size: max(var(--fs-min), 0.87em); }   
.head { display: grid; gap: 1.1em; }
.page__inner--work .num__n { display: none; }   

.num { display: grid; justify-items: start; gap: 0.15em; }

.num__k { padding: 0.1em 0.5em; font-weight: 700; font-size: var(--fs-ui); letter-spacing: var(--ls-wide); color: var(--color-main); background: var(--color-on-dark); transform: skewX(var(--skew)); }
.num__n {
  font-family: var(--font-en); font-style: italic; font-weight: 300; font-size: 3.4em; line-height: 0.9;
  color: transparent; -webkit-text-stroke: 1px var(--color-on-dark);
}

.hd {
  font-family: var(--font-head); font-weight: 900; font-size: var(--fs-hd); line-height: 1.5;
  letter-spacing: var(--ls-head); -webkit-mask-image: var(--grit); mask-image: var(--grit); -webkit-mask-size: 160px; mask-size: 160px;
}
.type { display: block; }

.hd .ln {
  transform: skewX(var(--skew)); transform-origin: left bottom;
  color: transparent; -webkit-text-stroke: 1px var(--color-on-dark);
  clip-path: inset(0 100% 0 0);
  transition:
    clip-path 450ms cubic-bezier(0.65, 0, 0.35, 1) calc(var(--t0, 200ms) + var(--k, 0) * 90ms),
    color 350ms ease calc(var(--t0, 200ms) + 600ms);
}
.hd .ln:nth-child(2) { --k: 1; }
.hd .ln:nth-child(3) { --k: 2; }
.hd.is-on .ln { clip-path: inset(0 -0.5em 0 0); color: var(--color-on-dark); }

.em {
  position: relative; display: inline-block; overflow: hidden; margin-inline: 0.08em; padding: 0 0.14em; font-size: 1.3em; line-height: 1.2;
  color: transparent; -webkit-text-stroke: 0;
  background:
    linear-gradient(var(--color-on-dark), var(--color-on-dark)) left top no-repeat,
    linear-gradient(var(--color-on-dark), var(--color-on-dark)) right top no-repeat,
    linear-gradient(var(--color-on-dark), var(--color-on-dark)) right bottom no-repeat,
    linear-gradient(var(--color-on-dark), var(--color-on-dark)) left bottom no-repeat;
  background-size: 0 2px, 2px 0, 0 2px, 2px 0;
}
.hd .em { --gd: calc(var(--t0, 200ms) + 900ms); font-size: 1.18em; }   
.txt .em { --gd: 1100ms; font-size: 1.12em; }
.em::before, .em::after {
  content: attr(data-text); position: absolute; inset: 0; padding: 0 0.14em; pointer-events: none;
  clip-path: inset(50% 0 50% 0);
}
.em::before { color: var(--color-on-dark); background: var(--color-main); }
.em::after { color: var(--color-main); background: var(--color-on-dark); }
.is-on .em {
  animation:
    em-draw 450ms linear calc(var(--gd, 0ms) - 500ms) both,
    em-fill 1ms linear var(--gd, 0ms) both,
    em-shake 5s steps(1, end) var(--gd, 0ms) infinite;
}
@keyframes em-draw {
  0% { background-size: 0 2px, 2px 0, 0 2px, 2px 0; }
  25% { background-size: 100% 2px, 2px 0, 0 2px, 2px 0; }
  50% { background-size: 100% 2px, 2px 100%, 0 2px, 2px 0; }
  75% { background-size: 100% 2px, 2px 100%, 100% 2px, 2px 0; }
  100% { background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%; }
}
@keyframes em-fill { to { color: var(--color-main); background-color: var(--color-on-dark); } }
.is-on .em::before { animation: em-slice-a 5s steps(1, end) var(--gd, 0ms) infinite; }
.is-on .em::after { animation: em-slice-b 5s steps(1, end) var(--gd, 0ms) infinite; }
@keyframes em-shake {
  0% { transform: translate(3px, -1px); }
  0.9% { transform: translate(-3px, 1px); }
  1.8% { transform: translate(2px, 0); }
  2.7% { transform: translate(-1px, -1px); }
  3.6%, 100% { transform: none; }
}
@keyframes em-slice-a {
  0% { clip-path: inset(8% 0 70% 0); transform: translateX(-6px); }
  0.9% { clip-path: inset(58% 0 18% 0); transform: translateX(5px); }
  1.8% { clip-path: inset(30% 0 48% 0); transform: translateX(-3px); }
  2.7% { clip-path: inset(80% 0 4% 0); transform: translateX(6px); }
  3.6%, 100% { clip-path: inset(50% 0 50% 0); transform: none; }
}
@keyframes em-slice-b {
  0% { clip-path: inset(62% 0 12% 0); transform: translateX(5px); }
  0.9% { clip-path: inset(14% 0 66% 0); transform: translateX(-6px); }
  1.8% { clip-path: inset(44% 0 34% 0); transform: translateX(4px); }
  2.7% { clip-path: inset(2% 0 84% 0); transform: translateX(-4px); }
  3.6%, 100% { clip-path: inset(50% 0 50% 0); transform: none; }
}
.kw { font-weight: 700; font-size: 1.1em; line-height: 1; }   

.wipe { display: block; clip-path: inset(0 100% 0 0); transition: clip-path 420ms cubic-bezier(0.7, 0, 0.2, 1); }
.is-on > .wipe { clip-path: inset(0 0 0 0); }

.bands { display: grid; gap: 0.5em; }
.page--dawn .bands .wipe { transition-delay: 450ms; }
.band { position: relative; }
.band::before {
  content: ""; position: absolute; top: 50%; right: 100%; width: var(--gutter); height: 1px; background: var(--color-frame);
  transform: scaleX(0); transform-origin: left; transition: transform 0.6s cubic-bezier(0.7, 0, 0.3, 1) 0.1s;
}
.band.is-on::before { transform: none; }
.band__t {
  padding: 0.3em 0.6em; line-height: 2.05; letter-spacing: var(--ls-wide); font-weight: 500;
  background: var(--color-band); -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.band--q { margin-top: 0.7em; font-size: 1.14em; line-height: 2; letter-spacing: 0.1em; white-space: nowrap; transition-delay: 700ms; }
.band--q.is-on::before, .band--q.is-on::after { transform: none; }

.sheet {
  position: relative; display: grid; gap: 0.6em; padding-left: 0.9em; font-size: max(var(--fs-min), 0.93em); line-height: 2;
  letter-spacing: 0.1em;
}
.sheet::before {
  content: ""; position: absolute; left: 0; top: -0.8em; bottom: -0.8em; width: 1px; background: var(--color-frame);
  transform: scaleY(0); transform-origin: top; transition: transform 700ms cubic-bezier(0.7, 0, 0.3, 1) 800ms;
}
.sheet.is-on::before { transform: none; }

.sheet__t--close { position: relative; justify-self: start; padding: 0.35em 0.6em; font-weight: 700; font-size: 1.08em; background: var(--color-band); }
.sheet__t--close::before, .sheet__t--close::after { content: ""; position: absolute; pointer-events: none; transition: transform 600ms cubic-bezier(0.7, 0, 0.3, 1) 1300ms; }
.sheet__t--close::before {
  inset: 0 -14px; transform: scaleX(0);
  background: linear-gradient(var(--color-frame), var(--color-frame)) top / 100% 1px no-repeat, linear-gradient(var(--color-frame), var(--color-frame)) bottom / 100% 1px no-repeat;
}
.sheet__t--close::after {
  inset: -10px 0; transform: scaleY(0);
  background: linear-gradient(var(--color-frame), var(--color-frame)) left / 1px 100% no-repeat, linear-gradient(var(--color-frame), var(--color-frame)) right / 1px 100% no-repeat;
}
.sheet.is-on .sheet__t--close::before, .sheet.is-on .sheet__t--close::after { transform: none; }

.lead { font-family: var(--font-head); font-weight: 900; font-size: var(--fs-hd); line-height: 1.5; letter-spacing: var(--ls-head); -webkit-mask-image: var(--grit); mask-image: var(--grit); -webkit-mask-size: 160px; mask-size: 160px; }
.scope { display: grid; gap: 0.35em; }
.scope__t { justify-self: start; padding: 0 0.4em; background: var(--color-band); }
.works { --p: 0; display: grid; gap: 0.55em; padding-top: 0.2em; }
.works__nav { position: relative; display: flex; justify-content: space-between; }
.works__nav::before, .works__nav::after {
  content: ""; position: absolute; left: 1.1em; right: 1.1em; top: 50%; pointer-events: none;
}
.works__nav::before { height: 1px; background: var(--color-on-dark-line); transform: scaleX(0); transform-origin: left; transition: transform 700ms cubic-bezier(0.7, 0, 0.3, 1) 700ms; }
.scope.is-on .works__nav::before { transform: none; }
.works__nav::after { height: 2px; margin-top: -0.5px; background: var(--color-on-dark); transform: scaleX(var(--p)); transform-origin: left; transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1); }
.works__btn {
  position: relative; z-index: 1; display: grid; place-items: center; width: 2.2em; height: 2.2em; padding: 0; border-radius: 50%;
  color: var(--color-on-dark); background: var(--color-main); border: 1px solid var(--color-frame); cursor: pointer;
  transition: color 0.3s, background 0.3s, border-color 0.3s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.works__btn .ic { width: 1.15em; height: 1.15em; }
.works__btn.is-done { border-color: var(--color-on-dark); }
.works__btn.is-now { color: var(--color-main); background: var(--color-on-dark); border-color: var(--color-on-dark); transform: scale(1.18); }
.works__list { position: relative; height: 2.2em; margin-bottom: 0.9em; }   
.works__item {
  position: absolute; inset: 0 auto 0 0; display: flex; align-items: center; padding: 0 0.6em; font-weight: 700; font-size: 1.3em; letter-spacing: 0.14em;
  background: var(--color-band); border-left: 2px solid var(--color-on-dark);
  opacity: 0; transform: translateX(-0.6em); transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.works__item.is-now { opacity: 1; transform: none; }
.ic {
  flex: none; width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 90; stroke-dashoffset: 90; transition: stroke-dashoffset 600ms cubic-bezier(0.65, 0, 0.35, 1) calc(var(--i, 0) * 60ms + 700ms);
}
.is-on .ic { stroke-dashoffset: 0; }
.txt { justify-self: start; padding: 0.15em 0.45em; background: var(--color-band); }
.txt--close { font-weight: 700; }

@media (min-width: 960px) {
  .rail::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(var(--color-line), var(--color-line)) left 40px top 0 / 1px 100% no-repeat,
      linear-gradient(var(--color-line), var(--color-line)) right 40px top 0 / 1px 100% no-repeat;
    opacity: 0.6;
  }
  
  .rail { overflow: hidden; }
  .rail-ticker {
    position: absolute; left: 0; display: flex; white-space: nowrap; pointer-events: none;
    font-family: var(--font-en); font-style: italic; font-weight: 300; font-size: min(84px, 8.5dvh); line-height: 1; letter-spacing: 0.08em;
    color: transparent; -webkit-text-stroke: 1px var(--color-line);
    animation: rail-tick 48s linear infinite;
  }
  .rail-ticker::before, .rail-ticker::after { content: attr(data-t); white-space: pre; }
  .rail-ticker--top { top: 28px; }
  .rail-ticker--bottom { bottom: 24px; animation-direction: reverse; }
  @keyframes rail-tick { to { transform: translateX(-50%); } }
  .rail-big {
    position: absolute; top: 20px; right: 28px; pointer-events: none;
    font-family: var(--font-en); font-style: italic; font-weight: 200; font-size: min(280px, 27dvh); line-height: 1; letter-spacing: -0.02em;
    color: transparent; -webkit-text-stroke: 1px var(--color-main-2);
  }
  .rail-big.is-change { animation: rail-big-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  @keyframes rail-big-in {
    0% { opacity: 0; transform: translateX(24px); clip-path: inset(0 0 0 100%); }
    12% { opacity: 1; transform: translateX(-6px); clip-path: inset(30% 0 40% 0); }
    24% { transform: translateX(4px); clip-path: inset(0 0 0 0); }
    100% { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
  }
}

@media (max-height: 620px) {
  .page__inner--work { gap: 0.35em; line-height: 1.5; }
  .works__btn { width: 1.9em; height: 1.9em; }   
  .works__list { height: 1.9em; margin-bottom: 0.4em; }
  .band__t { line-height: 1.8; }
  .page--dawn .band__t { line-height: 1.55; }
  .page--dawn .bands { gap: 0.2em; }
  .page--dawn .num, .page__inner--work .num { display: none; }   
  .sheet { line-height: 1.75; }
}

@media (max-width: 370px) {
  .page__inner--work { letter-spacing: 0.03em; }
  .works__btn { width: 2em; height: 2em; }
  .works__list { height: 2em; margin-bottom: 0.4em; }   
  .page__inner--work .num { display: none; }   
  .page--dawn .num__n { display: none; }   
}