/* Original 1440 × 573 Figma composition. Only the two background layers
   and the long English line receive scroll offsets; layout stays unchanged. */
.works {
  position: relative;
  height: calc(573px * var(--art-scale, 1));
  overflow: hidden;
  background: var(--paper);
  isolation: isolate;
}
.works::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 13px 10px 45px rgba(103, 103, 103, .25);
}
.works-art { height: 573px; }
.works-ring { position: absolute; pointer-events: none; }
.works-ring img, .works-bubble > img { display: block; max-width: none; }
.works-ring img { transform: translate3d(var(--depth-x, 0px), var(--depth-y, 0px), 0) scale(var(--depth-scale, 1)); }
.works-ring--right { left: 329px; top: -558px; }
.works-ring--left { left: -459.51px; top: -461.4px; opacity: .66; filter: blur(32.5px); }
.works-title, .works-statement {
  position: absolute;
  margin: 0;
  color: #000;
  font-family: var(--font-en);
  font-size: 98px;
  font-weight: 700;
  line-height: 98.9px;
}
.works-title { top: 180px; left: 179px; width: 595px; }
.works-statement { top: 263px; left: 720px; transform: translateX(calc(-50% + var(--works-copy-x, 0px))); white-space: nowrap; text-align: center; }
.works-mascot { position: absolute; left: 570px; top: 112px; width: 301px; height: 302px; object-fit: cover; }
.works-bubble { position: absolute; left: 837px; top: 174px; width: 126px; height: 87.804px; }
.works-bubble > img { position: absolute; left: -18px; top: -17px; }
.works-bubble p {
  position: absolute;
  top: 36px;
  left: 64.5px;
  width: 103px;
  margin: 0;
  transform: translate(-50%, -50%);
  font: 700 25px/33.6px var(--font-ja);
  color: #000;
  text-align: center;
  letter-spacing: 2.25px;
}
.about-rings img {
  display: block;
  max-width: none;
  transform: translate3d(var(--about-rings-x, 0px), var(--about-rings-y, 0px), 0) rotate(var(--about-rings-turn, 0deg));
  transform-origin: 66% 53%;
}
.about[data-background-running="true"] .about-rings img { will-change: transform; }
.about {
  position: relative;
  z-index: 1;
  height: calc(768px * var(--art-scale, 1));
  overflow: hidden;
  background: var(--ink);
  color: #fff;
}
.about-art { height: 768px; }
.about-rings { position: absolute; top: 0; left: 0; pointer-events: none; }
.about-eyebrow, .about-title, .about-copy { position: absolute; width: 1440px; margin: 0; text-align: center; }
.about-eyebrow { top: 120px; font: 500 20px/1.2 var(--font-en); }
.about-title { top: 176px; font: 700 60px/1.45 var(--font-ja); }
.about-copy { top: 400px; font: 400 18px/2.1 var(--font-ja); }
.about-copy p { margin: 0; }
.about-actions { position: absolute; top: 580px; left: 404px; display: flex; gap: 32px; }
.about-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 300px;
  height: 66px;
  padding: 0 39px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 33px;
  background: transparent;
  color: inherit;
  font: 500 16px/1.5 var(--font-ja);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease;
}
.about-link:first-child { transform: translateY(1px); }
.about-link-arrow {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  height: 24px;
  margin-left: 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  font: 700 15px/1 var(--font-en);
  transition: transform 180ms ease;
}
.about-link:hover { background: rgba(255, 255, 255, .1); }
.about-link:hover .about-link-arrow { transform: translateX(3px); }
.about-link:focus-visible, .site-footer a:focus-visible, .site-footer button:focus-visible { outline: 2px solid var(--orange); outline-offset: 5px; }
.site-footer { position: relative; height: calc(205px * var(--art-scale, 1)); overflow: hidden; background: var(--ink); color: #f5f5f5; }
.footer-art { height: 205px; }
.footer-main { position: absolute; top: 48px; left: 64px; width: 1312px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-ja); font-weight: 700; }
.footer-wordmark { width: 270px; font-size: 30px; line-height: 1.2; letter-spacing: .6px; }
.footer-nav { display: flex; width: 720px; justify-content: space-between; gap: 32px; align-items: start; }
.footer-nav > :nth-child(1) { width: 86px; }
.footer-nav > :nth-child(2) { width: 88px; }
.footer-nav > :nth-child(3) { width: 110px; }
.footer-nav > :nth-child(4) { width: 70px; }
.footer-nav > :nth-child(5) { width: 100px; }
.site-footer a, .site-footer button { color: inherit; text-decoration: none; }
.site-footer button { border: 0; padding: 0; background: none; cursor: pointer; font-family: inherit; font-weight: inherit; }
.footer-nav a, .footer-nav button { flex-shrink: 0; font-size: 16px; line-height: 28px; text-align: left; }
.site-footer a:hover, .site-footer button:hover { color: #ff9770; }
.footer-divider { position: absolute; top: 116px; left: 64px; width: 1312px; height: 1px; background: rgba(217, 217, 217, .3); }
.footer-legal { position: absolute; top: 149px; left: 64px; display: flex; justify-content: space-between; width: 1312px; font-family: var(--font-ja); font-size: 13px; }
.footer-legal p { margin: 0; line-height: 20.8px; }
.footer-legal button { font-size: 13px; line-height: 24px; font-weight: 700; text-align: right; }

/* Mobile is a provisional natural-flow layout. The desktop title, copy,
   buttons and decorative assets are retained, with the Works headline split
   into two lines and footer navigation wrapped to avoid horizontal overflow. */
@media (max-width: 767px) {
  .works { height: 440px; }
  .works-art.art-stage { width: 100%; height: 440px; transform: none; }
  .works-ring--right { top: -100px; left: 5%; transform: scale(.43); transform-origin: top left; }
  .works-ring--left { top: -135px; left: -280px; transform: scale(.43); transform-origin: top left; }
  .works-title { top: 78px; left: 24px; width: calc(100% - 48px); font-size: 64px; line-height: 1; }
  .works-statement { top: 263px; left: 24px; width: calc(100% - 48px); transform: translateX(var(--works-copy-x, 0px)); font-size: 43px; line-height: 1.06; white-space: normal; text-align: left; }
  .works-mascot { top: 100px; left: 50%; transform: translateX(-50%); width: 200px; height: 200px; }
  .works-bubble { top: 157px; left: calc(50% + 55px); transform: scale(.65); transform-origin: top left; }
  .about { height: auto; }
  .about-art.art-stage { position: relative; width: 100%; height: auto; padding: 93px 24px 88px; transform: none; }
  .about-rings { top: 30px; left: -290px; transform: scale(.66); transform-origin: top left; }
  .about-eyebrow, .about-title, .about-copy { position: relative; width: auto; top: auto; z-index: 1; }
  .about-eyebrow { font-size: 18px; }
  .about-title { margin-top: 25px; font-size: clamp(24px, 6.3vw, 36px); line-height: 1.55; letter-spacing: -.04em; }
  .about-copy { margin-top: 33px; font-size: 14px; line-height: 2.1; text-align: left; }
  .about-copy p + p { margin-top: 8px; }
  .about-actions { position: relative; top: auto; left: auto; z-index: 1; margin-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .about-link { width: min(300px, 100%); height: 60px; padding-inline: 28px; font-size: 14px; }
  .about-link:first-child { transform: none; }
  .site-footer { height: auto; }
  .footer-art.art-stage { position: relative; width: 100%; height: auto; padding: 28px 24px 32px; transform: none; }
  .footer-main, .footer-divider, .footer-legal { position: relative; top: auto; left: auto; width: 100%; }
  .footer-main { display: block; }
  .footer-wordmark { display: inline-block; width: auto; font-size: 28px; }
  .footer-nav { width: 100%; margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px 10px; }
  .footer-nav > :nth-child(n) { width: auto; }
  .footer-nav a, .footer-nav button { font-size: 13px; }
  .footer-divider { margin-block: 27px 23px; }
  .footer-legal { flex-wrap: wrap; align-items: center; gap: 12px; }
  .footer-legal, .footer-legal button { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .about-link, .about-link-arrow { transition: none; }
}