:root { color-scheme: dark; --bg: #101010; --white: #f3f3f0; --muted: #90908d; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--white); font-family: Inter, 'Noto Sans JP', sans-serif; -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
[hidden] { display: none !important; }
.hero { height: 100svh; min-height: 400px; display: flex; flex-direction: column; background: #080808; }
.hero-header, .hero-footer { flex: 0 0 66px; display: flex; justify-content: space-between; align-items: center; padding: 0 3.5vw; }
.hero-header h1 { margin: 0; font-size: 12px; font-weight: 400; letter-spacing: .23em; }
.hero-header a, .hero-footer { font-size: 10px; letter-spacing: .16em; }
.hero-header a span { padding-left: 18px; font-size: 18px; }
.hero-screen { flex: 1; min-height: 0; position: relative; width: 90%; margin: auto; }
.hero-screen video { display: block; width: 100%; height: 100%; object-fit: contain; background: #080808; }
.hero-footer { flex-basis: 58px; color: #b4b4b0; }
.hero-footer button { border: 0; background: transparent; padding: 10px 0 10px 20px; font-size: 10px; letter-spacing: .14em; }
.hero-footer span { margin-left: 18px; }
.manual-play { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); background: #111e; border: 1px solid #777; padding: 15px 24px; border-radius: 2px; font-size: 13px; }
.works { max-width: 1280px; margin: auto; padding: 100px 6vw 110px; scroll-margin-top: 32px; }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 58px; }
.section-heading h2 { margin: 0; font-size: clamp(48px, 6.6vw, 96px); font-weight: 300; line-height: 1; letter-spacing: .12em; }
.section-heading > span { font-size: 10px; letter-spacing: .15em; color: var(--muted); }
.hero-header nav { display: flex; align-items: center; gap: 32px; }
#contact-link { font-size: 12px; letter-spacing: .02em; }
.contact-controls { display: flex; align-items: center; gap: 10px; min-width: 0; }
.contact-controls #contact-link { min-width: 0; overflow-wrap: anywhere; line-height: 1.6; }
#copy-email { flex: 0 0 108px; width: 108px; min-height: 32px; padding: 6px 8px; border: 1px solid #ffffff45; border-radius: 2px; background: transparent; font-size: 11px; line-height: 1.5; white-space: nowrap; }
.format-note { margin: -24px 0 36px; color: #b4b4b0; font-size: 13px; line-height: 1.8; }
.works-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); gap: 60px 36px; align-items: start; }
.work-card[data-position="top-left"] { grid-area: 1 / 1; }
.work-card[data-position="top-right"] { grid-area: 1 / 2; }
.work-card[data-position="bottom-left"] { grid-area: 2 / 1; }
.work-card[data-position="bottom-right"] { grid-area: 2 / 2; }
.work-description { margin: 14px 0 0; color: #b4b4b0; font-size: 12px; line-height: 1.9; overflow-wrap: anywhere; }
.work-card { min-width: 0; }
.work-media { width: 100%; aspect-ratio: var(--ratio, 16 / 9); display: block; position: relative; overflow: hidden; background: #191919; border: 0; padding: 0; }
.work-media img { width: 100%; height: 100%; display: block; object-fit: contain; filter: brightness(.87); transition: filter .25s; }
button.work-media:hover img, button.work-media:focus-visible img { filter: brightness(1); }
.play-mark { position: absolute; right: 18px; bottom: 18px; width: 42px; height: 42px; border: 1px solid #ffffff70; background: #0007; border-radius: 50%; display: grid; place-items: center; font-size: 11px; padding-left: 2px; }
.work-info { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding-top: 21px; }
.work-info h3 { font-size: 17px; font-weight: 400; margin: 0 0 9px; letter-spacing: .02em; line-height: 26px; }
.work-info p { margin: 0; font-size: 11px; color: var(--muted); line-height: 20px; }
.work-number { color: #777774; font-size: 10px; letter-spacing: .1em; padding-top: 4px; }
dialog { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border: 0; padding: 34px 4vw; color: var(--white); background: #090909f5; }
dialog::backdrop { background: #000d; }
.player-shell { max-width: 1600px; height: 100%; margin: auto; display: flex; flex-direction: column; justify-content: center; }
.player-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-bottom: 22px; }
.player-heading h2 { margin: 0; font-size: 17px; font-weight: 400; }
.player-heading button { background: transparent; border: 0; font-size: 10px; letter-spacing: .16em; padding: 12px; }
.player-heading button span { margin-left: 16px; font-size: 24px; vertical-align: middle; }
#work-video { display: block; width: 100%; min-height: 0; max-height: calc(100svh - 160px); object-fit: contain; background: #000; }
.player-description { font-size: 12px; color: var(--muted); line-height: 1.8; margin: 18px 0 0; }
.status { padding: 0 3.5vw; font-size: 12px; color: #bbb; }
body.player-open { overflow: hidden; }
@media (max-width: 700px) {
  .hero { height: auto; min-height: 0; }
  .hero-header { flex-basis: auto; min-height: 92px; padding: 18px 6vw; gap: 15px; flex-wrap: wrap; }
  .hero-header nav { width: 100%; justify-content: space-between; gap: 12px; }
  .contact-controls { flex: 1; gap: 8px; }
  .hero-header nav > a { flex-shrink: 0; }
  #contact-link { font-size: 11px; }
  .hero-header h1 { font-size: 10px; letter-spacing: .18em; }
  .hero-screen { flex: none; aspect-ratio: 16 / 9; width: 92%; }
  .hero-footer { padding: 0 6vw; flex-basis: 57px; font-size: 9px; }
  .works { padding: 70px 6vw 80px; }
  .section-heading { margin-bottom: 35px; }
  .section-heading > span { font-size: 8px; letter-spacing: .08em; }
  .format-note { margin: -12px 0 28px; font-size: 12px; }
  .works-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 42px; }
  .work-card[data-position] { grid-area: auto; }
  .work-info { padding-top: 17px; }
  .work-info h3 { font-size: 16px; }
  dialog { padding: 20px 4vw; }
  .manual-play { bottom: 10px; font-size: 11px; padding: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .work-media img { transition: none; } }